<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Super Agent party</title>
  <link rel="stylesheet" href="css/styles.css">
  <link rel="stylesheet" href="css/transition.css">
  <!-- GitHub Markdown CSS for styling -->
  <link rel="stylesheet" href="css/github-markdown.min.css">
  <!-- Highlight.js CSS for code highlighting -->
  <link rel="stylesheet" href="css/github.min.css">
  <script src="js/clipboard.min.js"></script>
  <!--引入html2canvas-->
  <script src="js/html2canvas.min.js"></script>
  <!-- 引入Element Plus样式 -->
  <link rel="stylesheet" href="node_modules/element-plus/dist/index.css">
  <link rel="stylesheet" href="fontawesome/css/all.min.css">
  <link rel="icon" href="source/icon.png" type="image/png">
  <!-- Voice Activation Detection -->
  <script src="js/ort.js"></script>
  <script src="js/bundle.min.js"></script>
  <script>
    console.log(`
     _       ____   _____   _   _   _____ 
    / \\     / ___| | ____| | \\ | | |_   _|
   / _ \\   | |  _  |  _|   |  \\| |   | |  
  / ___ \\  | |_| | | |___  | |\\  |   | |  
 /_/   \\_\\  \\____| |_____| |_| \\_|   |_|  
                                          
  ____       _      ____    _____  __   __
 |  _ \\     / \\    |  _ \\  |_   _| \\ \\ / /
 | |_) |   / _ \\   | |_) |   | |    \\ V / 
 |  __/   / ___ \\  |  _ <    | |     | |  
 |_|     /_/   \\_\\ |_| \\_\\   |_|     |_|  
       
 github repo: https://github.com/heshengtao/super-agent-party
`);
  </script>
  <!-- Include markdown-it and highlight.js scripts -->
  <script src="js/markdown-it.min.js"></script>
  <script src="js/highlight.min.js"></script>
  <script src="js/locales.js"></script>
  <script src="js/mermaid.min.js"></script>
  <script src="js/uuid.min.js"></script>
  <script>
    mermaid.initialize({ 
      startOnLoad: false,
      securityLevel: 'loose',
      theme: 'default',
    });
  </script>
  <!--  MathJax 配置  -->
  <script>
    window.MathJax = {
      options: {
        ignoreHtmlClass: 'user-message-content'  // 匹配用户消息容器类名
      },
      tex: {
        inlineMath: [
          ['$', '$']       // 常见的行内公式定界符
        ],
        displayMath: [
          ['$$', '$$']     // 常见的行间公式定界符
        ],
      },
      svg: {
        fontCache: 'global' // 使用全局字体缓存
      },
      startup: {
        pageReady: () => {
          // 可选：页面加载完成后执行一些操作
          console.log("MathJax is ready!");
        }
      }
    };
  </script>
  <script id="MathJax-script" async src="js/tex-svg.js"></script>
</head>
<body>
  <div id="app">
    <!-- 顶部栏 -->
    <el-header v-if="isElectron || isMobile" class="top-bar" height="30px">
      <div class="window-controls">
      <el-button 
        v-if="updateDownloaded"
        @click="handleUpdateAction" 
        class="top-bar-btn update-btn installed"
        text>
        <el-icon>
          <i class="fa-solid fa-rocket"></i>
        </el-icon>
        {{ t('installNow') }}
      </el-button>
      <!-- 添加移动端菜单按钮 -->
      <el-button 
      class="top-bar-btn"
       v-if="isMobile" 
       @click="isCollapse = sidebarVisible;sidebarVisible = !sidebarVisible"
       text
       :title="isCollapse ? t('expandAside') : t('collapseAside')">
          <el-icon>
            <i :class="!sidebarVisible ? 'fa-solid fa-bars' : 'fa-solid fa-bars-staggered'"></i>
          </el-icon>
      </el-button>
        <!-- 新增展开/收起按钮 -->
        <el-button 
          v-if="!isMobile"
          @click="isCollapse = !isCollapse"
          class="top-bar-btn"
          text
          :title="isCollapse ? t('expandAside') : t('collapseAside')">
          <el-icon>
            <i :class="isCollapse ? 'fa-solid fa-bars' : 'fa-solid fa-bars-staggered'"></i>
          </el-icon>
        </el-button>
        <el-button v-if="!isMac&&!isMobile" @click="minimizeWindow" class="top-bar-btn" text>
          <el-icon>
            <i class="fa-solid fa-minus"></i>
          </el-icon>
        </el-button>
        <el-button v-if="!isMac&&!isMobile" @click="toggleIcon" class="top-bar-btn" text>
          <el-icon>
            <i :class="iconClass"></i>
          </el-icon>
        </el-button>
        <el-button v-if="!isMac&&!isMobile" @click="closeWindow" class="top-bar-btn" text>
          <el-icon>
            <i class="fa-solid fa-xmark"></i>
          </el-icon>
        </el-button>
      </div>
    </el-header>

    <!-- 主容器 -->
    <el-container class="main-container">
      <!-- 侧边栏 -->
      <el-aside 
        :width="sidebarStyle.width"
        class="sidebar"
        :class="{ 'mobile-sidebar': isMobile }"
        @dblclick="isCollapse = !isCollapse"
        v-show="!isMobile || sidebarVisible">
        <el-menu
          :collapse="isCollapse"
          :default-active="activeMenu"
          class="el-menu-vertical"
          @select="handleSelect">
          <el-menu-item index="home">
            <el-icon>
              <i class="fa-solid fa-comment"></i>
            </el-icon>
            <template #title>{{ t('chat') }}</template>
          </el-menu-item>
          <el-menu-item index="model-config">
            <el-icon>
              <i class="fa-solid fa-hexagon-nodes"></i>
            </el-icon>
            <template #title>{{ t('modelConfig') }}</template>
          </el-menu-item>
          <el-menu-item index="toolkit">
            <el-icon>
              <i class="fa-solid fa-toolbox"></i>
            </el-icon>
            <template #title>{{ t('toolkit') }}</template>
          </el-menu-item>
          <el-menu-item index="agent_group">
            <el-icon>
              <i class="fa-solid fa-gamepad"></i>
            </el-icon>
            <template #title>{{ t('agentSuite') }}</template>
          </el-menu-item>
          <el-menu-item index="deploy-bot">
              <el-icon>
                  <i class="fa-solid fa-robot"></i>
              </el-icon>
              <template #title>{{ t('deployBot') }}</template>
          </el-menu-item>
          <el-menu-item index="storage">
            <el-icon>
              <i class="fa-solid fa-box-archive"></i>
            </el-icon>
            <template #title>{{ t('storage') }}</template>
          </el-menu-item>
          <el-menu-item index="api-group">
            <el-icon>
              <i class="fa-solid fa-plug"></i>
            </el-icon>
            <template #title>{{ t('apiGroup') }}</template>
          </el-menu-item>
          <el-menu-item index="system">
            <el-icon>
              <i class="fa-solid fa-gear"></i>
            </el-icon>
            <template #title>{{ t('systemSettings') }}</template>
          </el-menu-item>
          <el-menu-item 
            index="logo"
            class="sidebar-logo">
            <el-icon class="logo-icon"><img src="./source/icon.png" /></el-icon>
            <template #title>{{ t('aboutUs') }}</template>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <div 
        class="sidebar-mask"
        v-show="isMobile && sidebarVisible"
        @click="sidebarVisible = false"></div>
      <!-- 内容区 -->
      <el-main class="content">
        <!-- 聊天界面保持不变 -->
        <div v-show="activeMenu === 'home'" class="page chat-container">
          <!-- 聊天消息列表 -->
          <div class="messages-container" ref="messagesContainer">
            <div v-for="(message, index) in messages" :key="index" class="message" :class="message.role">
              <div v-if="ttsSettings.enabled && message.role === 'assistant'" class="tts-controls">
                <el-tooltip :content="message.isPlaying || false ? t('pause') : t('play')">
                  <el-button 
                    @click="toggleTTS(message)"
                    circle 
                    size="small"
                  >
                    <i v-if="!message.isPlaying" class="fa-solid fa-play"></i>
                    <i v-else class="fa-solid fa-pause"></i>
                  </el-button>
                </el-tooltip>
                <el-tooltip :content="t('backward')">
                  <el-button 
                    @click="backwardTTS(message)"
                    circle 
                    size="small"
                  >
                    <i class="fa-solid fa-backward"></i>
                  </el-button>
                </el-tooltip>
                <el-tooltip :content="t('forward')">
                  <el-button 
                    @click="forwardTTS(message)"
                    circle 
                    size="small"
                  >
                    <i class="fa-solid fa-forward"></i>
                  </el-button>
                </el-tooltip>
                <span class="tts-status" v-if="message.ttsChunks">
                  {{ (message.currentChunk || 0) + 1 }}/{{ message.ttsChunks.length }}
                </span>
                <span class="tts-status" v-else>
                  {{ t('initializing') }}
                </span>
              </div>
              <div class="message-content">
                <!-- 用户消息内容 -->
                <div v-if="message.role === 'user'" class="user-message-content" data-mjx-disabled="true">
                  <div v-html="message.content" class = "user-msg"></div>
                  <!-- 文件链接展示 -->
                  <div v-if="message.fileLinks?.length" class="file-links">
                    <a v-for="(link, linkIndex) in message.fileLinks" :key="linkIndex" :href="formatFileUrl(link.path)" target="_blank" class="file-link">
                      @{{ link.name }}
                    </a>
                  </div>
                  <!-- 图片展示 -->
                  <div v-if="message.imageLinks?.length" class="image-links">
                    <img v-for="(link, linkIndex) in message.imageLinks" :key="linkIndex" :src="formatFileUrl(link.path)" class="image-link"/>
                  </div>
                </div>
                <!-- AI回复内容 -->
                <div v-else-if="message.role === 'assistant'"  class="markdown-body" v-html="message.briefly ? formatMessage(message.pure_content??msg.content) : formatMessage(message.content)"></div>
                <!-- 系统消息内容 -->
                <div v-else class="user-message-content" data-mjx-disabled="true">
                  <div v-html="t('system_prompt') + message.content"></div>
                </div>
              </div>
              <!-- 添加复制按钮 -->
              <div class="message-actions">
                <el-tooltip v-if="mainAgent === 'super-model' || message.role !== 'system'" :content="t('edit')" placement="bottom">
                  <el-button @click="openEditDialog(message.role, message.content,index)" circle size="small">
                    <i class="fa-solid fa-pen-to-square"></i>
                  </el-button>
                </el-tooltip>
                <el-tooltip v-if="message.role === 'assistant'" :content="t('briefly')" placement="bottom">
                  <el-button 
                    class="briefly-btn" 
                    @click="toggleBriefly(index)"
                    circle 
                    size="small">
                    <i class="fa-solid fa-asterisk"></i>
                  </el-button>
                </el-tooltip>
                <el-tooltip v-if="message.role === 'assistant'" :content="t('rewrite')" placement="bottom">
                  <el-button 
                    class="rewrite-btn" 
                    @click="rewrite(index)"
                    circle 
                    size="small">
                    <i class="fa-solid fa-rotate"></i>
                  </el-button>
                </el-tooltip>
                <el-tooltip :content="t('copy')" placement="bottom">
                  <el-button 
                    class="copy-btn" 
                    @click="copyMessageContent(message)"
                    circle 
                    size="small">
                    <i class="fa-solid fa-copy"></i>
                  </el-button>
                </el-tooltip>
                <el-tooltip v-if="message.role !== 'system'" :content="t('delete')" placement="bottom">
                  <el-button @click="deleteMessage(index)" circle size="small">
                    <i class="fa-solid fa-trash-can"></i>
                  </el-button>
                </el-tooltip>
                <el-tooltip v-if="message.role === 'system'" :content="t('reset')" placement="bottom">
                  <el-button @click="resetMessage(index)" circle size="small">
                    <i class="fa-solid fa-rotate"></i>
                  </el-button>
                </el-tooltip>
              </div>
            </div>
          </div>
          <el-dialog
            v-model="showEditDialog"
            :title="editType === 'system' ? t('editSystemPrompt') : t('editMessage')"
            width="600px">
            <el-input
              v-model="editContent"
              type="textarea"
              :rows="18"
              :placeholder="t('enterContent')"
            ></el-input>
            <template #footer>
              <el-button @click="showEditDialog = false">{{ t('cancel') }}</el-button>
              <el-button type="primary" @click="saveEdit">{{ t('save') }}</el-button>
            </template>
          </el-dialog>
            <!-- 文件上传对话框 -->
            <el-dialog
              v-model="showUploadDialog"
              :title="currentUploadType==='file' ? t('uploadFile') : t('uploadImage')"
              width="600px"
              :before-close="() => showUploadDialog = false">

              <div class="upload-container">
                <!-- 可点击的拖拽区域 -->
                <div
                  class="drop-zone"
                  @dragover.prevent
                  @drop.prevent="handleDrop"
                  @click="browseFiles"
                >
                  <el-icon :size="50"><upload /></el-icon>
                  <p>{{ t('clickOrDrop') }}</p>
                </div>
              </div>
            </el-dialog>
            <el-dialog
              v-model="showKnowledgeDialog"
              :title="t('knowledgeBaseSelection')"
              width="600px">
              <div class="knowledge-dialog-content">
                <div v-for="kb in knowledgeBases" :key="kb.id" class="knowledge-item">
                  <el-switch v-model="kb.enabled" @change="autoSaveSettings"></el-switch>
                  <div class="knowledge-info">
                    <div class="knowledge-name">{{ kb.name }}</div>
                    <div class="knowledge-desc">{{ kb.introduction || t('noDescription') }}</div>
                  </div>
                </div>
                <div v-if="knowledgeBases.length === 0" class="empty-tip">
                  {{ t('noKnowledgeBase') }}
                  <a href="#" @click.stop.prevent="switchToKnowledgePage">{{ t('goToKnowledgeBase') }}</a>
                  {{ t('add') }}
                </div>
              </div>
            </el-dialog>
          <el-dialog
            v-model="showMemoryDialog"
            :title="t('memory')"
            width="600px">
            <div class="knowledge-dialog-content">
              <el-form-item :label="t('memoryEnable')" class="form-item-align" label-position="left">
                <el-switch
                  v-model="memorySettings.is_memory"
                  @change="autoSaveSettings"
                ></el-switch>
              </el-form-item>
              <el-form-item :label="t('resultCount')" class="form-item-align">
                <el-slider
                  v-model="memorySettings.memoryLimit"
                  :min="1"
                  :max="20"
                  :step="1"
                  @input="autoSaveSettings"
                />
              </el-form-item>
              <el-form-item :label="t('selectMemory')">
                <el-select 
                  v-model="memorySettings.selectedMemory" 
                  :placeholder="t('selectMemoryPlaceholder')"
                  class="full-width-input">
                  <el-option
                    v-for="memory in memories"
                    :key="memory.id"
                    :label="memory.name"
                    :value="memory.id"
                  />
                </el-select>
              </el-form-item>
            </div>
          </el-dialog>
          <el-dialog
            v-model="showAgentDialog"
            :title="t('agentSettings')"
            width="600px">
            <div class="agent-dialog-content">
              <!-- 主智能体选择 -->
              <div class="agent-section">
                <h3>{{ t('mainAgent') }}</h3>
                <el-select 
                  v-model="mainAgent"
                  @change="changeMainAgent">
                  <el-option
                    :label="t('defaultAgent')"
                    value="super-model"
                  >
                  </el-option>
                  <el-option
                    v-for="(agent, id) in agents"
                    :key="id"
                    :label="agent.name"
                    :value="id"
                  >
                  </el-option>
                </el-select>
              </div>
              <!-- 工具智能体选择 -->
              <div class="agent-section">
                <h3>{{ t('toolAgents') }}</h3>
                <div 
                  v-for="(agent, id) in agents" 
                  :key="id"
                  class="knowledge-item">
                  <el-switch 
                    v-model="agent.enabled"
                    @change="autoSaveSettings">
                  </el-switch>
                  <div class="knowledge-info">
                    <div class="knowledge-name">{{ agent.name }}</div>
                  </div>
                </div>
                <div v-if="Object.keys(agents).length === 0" class="empty-tip">
                  {{ t('noagents') }}
                  <a href="#" @click.stop.prevent="switchToagents">{{ t('goToagents') }}</a>
                  {{ t('add') }}
                </div>
              </div>
            </div>
          </el-dialog>
          <el-dialog
            v-model="showMCPServerDialog"
            :title="t('mcpServersManagement')"
            width="600px">
            <div class="knowledge-dialog-content">
              <!-- 服务器列表 -->
              <div v-for="(server, name) in mcpServers" :key="name" class="knowledge-item">
                <el-switch 
                  :active-value="false"  
                  :inactive-value="true" 
                  v-model="server.disabled" 
                  @change="autoSaveSettings">
                </el-switch>
                <div class="knowledge-info">
                  <div class="knowledge-name">{{ name }}</div>
                </div>
              </div>
              <div v-if="Object.keys(mcpServers).length === 0" class="empty-tip">
                {{ t('nomcpServers') }}
                <a href="#" @click.stop.prevent="switchTomcpServers">{{ t('goTomcpServers') }}</a>
                {{ t('add') }}
              </div>
            </div>
          </el-dialog>
          <el-dialog
            v-model="showA2AServerDialog"
            :title="t('a2aServersManagement')"
            width="600px">
            <div class="knowledge-dialog-content">
              <div v-for="(server, url) in a2aServers" :key="url" class="knowledge-item">
                <el-switch v-model="server.enabled" @change="autoSaveSettings"></el-switch>
                <div class="knowledge-info">
                  <div class="knowledge-name">{{ server.name }}</div>
                  <div class="knowledge-desc">{{ server.description }}</div>
                </div>
              </div>
              <div v-if="Object.keys(a2aServers).length === 0" class="empty-tip">
                {{ t('noA2AServers') }}
                <a href="#" @click.stop.prevent="switchToa2aServers">{{ t('addA2AServer') }}</a>
                {{ t('add') }}
              </div>
            </div>
          </el-dialog>
          <el-dialog
            v-model="showLLMToolsDialog"
            :title="t('llmToolsManagement')"
            width="600px">
            <div class="knowledge-dialog-content">
              <div v-for="(tool, index) in llmTools" :key="index" class="knowledge-item">
                <el-switch v-model="tool.enabled" @change="autoSaveSettings"></el-switch>
                <div class="knowledge-info">
                  <div class="knowledge-name">{{ tool.name }}</div>
                  <div class="knowledge-desc">{{ tool.description || t('noDescription') }}</div>
                </div>
                <el-button 
                  @click="removeLLMTool(index)" 
                  type="danger" 
                  circle 
                  size="small">
                  <i class="fa-solid fa-trash"></i>
                </el-button>
              </div>
              <div v-if="llmTools.length === 0" class="empty-tip">
                {{ t('noLLMTools') }}
                <a href="#" @click.stop.prevent="switchTollmTools">{{ t('gollmTools') }}</a>
                {{ t('add') }}
              </div>
            </div>
          </el-dialog>
          <el-dialog
            v-model="showComfyUIDialog"
            :title="t('ComfyUIManagement')"
            width="600px">
            <div class="knowledge-dialog-content">
              <div v-for="(tool, index) in workflows" :key="index" class="knowledge-item">
                <el-switch v-model="tool.enabled" @change="autoSaveSettings"></el-switch>
                <div class="knowledge-info">
                  <div class="knowledge-name">{{ tool.original_filename }}</div>
                  <div class="knowledge-desc">{{ tool.description || t('noDescription') }}</div>
                </div>
                <el-button 
                  @click="deleteWorkflow(tool.unique_filename)" 
                  type="danger" 
                  circle 
                  size="small">
                  <i class="fa-solid fa-trash"></i>
                </el-button>
              </div>
              <div v-if="workflows.length === 0" class="empty-tip">
                {{ t('noWorkflows') }}
                <a href="#" @click.stop.prevent="switchToComfyui">{{ t('goComfyui') }}</a>
                {{ t('add') }}
              </div>
            </div>
          </el-dialog>
          <el-dialog
            v-model="showStickerPacksDialog"
            :title="t('StickerPackManagement')"
            width="600px">
            <div class="knowledge-dialog-content">
              <div v-for="(pack, index) in stickerPacks" :key="index" class="knowledge-item">
                <el-switch v-model="pack.enabled" @change="autoSaveSettings"></el-switch>
                <div class="knowledge-info">
                  <div class="knowledge-name">{{ pack.name }}</div>
                </div>
                <el-button 
                  @click="deleteStickerPack(pack)" 
                  type="danger" 
                  circle 
                  size="small">
                  <i class="fa-solid fa-trash"></i>
                </el-button>
              </div>
              <div v-if="stickerPacks.length === 0" class="empty-tip">
                {{ t('noStickerPack') }}
                <a href="#" @click.stop.prevent="switchToStickerPacks">{{ t('goStickerPack') }}</a>
                {{ t('add') }}
              </div>
            </div>
          </el-dialog>
          <el-dialog
            v-model="showHttpToolDialog"
            :title="t('HttpToolsManagement')"
            width="600px">
            <div class="knowledge-dialog-content">
              <div v-for="(tool, index) in customHttpTools" :key="index" class="knowledge-item">
                <el-switch v-model="tool.enabled" @change="autoSaveSettings"></el-switch>
                <div class="knowledge-info">
                  <div class="knowledge-name">{{ tool.name }}</div>
                  <div class="knowledge-desc">{{ tool.description || t('noDescription') }}</div>
                </div>
                <el-button 
                  @click="removeCustomHttpTool(tool.id)" 
                  type="danger" 
                  circle 
                  size="small">
                  <i class="fa-solid fa-trash"></i>
                </el-button>
              </div>
              <div v-if="customHttpTools.length === 0" class="empty-tip">
                {{ t('noHttpTools') }}
                <a href="#" @click.stop.prevent="switchToHttpTools">{{ t('goHttpTools') }}</a>
                {{ t('add') }}
              </div>
            </div>
          </el-dialog>
          <el-dialog
            v-model="showHistoryDialog"
            :title="t('chatHistory')"
            width="600px">
            <div class="knowledge-dialog-content">
              <!-- 添加搜索框 -->
              <el-input
                  v-model="searchKeyword"
                  :placeholder="t('searchChatHistoryPlaceholder')"
                  clearable
                  class="search-input">
                  <template #prefix>
                      <el-icon><i class="fa-solid fa-magnifying-glass"></i></el-icon>
                  </template>
              </el-input>

              <!-- 修改后的对话记录列表 -->
              <div v-for="conv in filteredConversations" 
                  :key="conv.id" 
                  class="knowledge-item"
                  @click="loadConversation(conv.id)">
                <el-button 
                  @click.stop="confirmDeleteConversation(conv.id)"
                  type="danger" 
                  circle 
                  size="small">
                  <i class="fa-solid fa-trash"></i>
                </el-button>
                <div class="knowledge-info">
                  <h3 class="knowledge-name">{{ conv.title || t('untitled') }}</h3>
                  <div class="knowledge-desc">
                    <el-icon class="meta-icon"><i class="fa-solid fa-message"></i></el-icon>
                    <span>{{ conv.messages?.length || 0 }} {{ t('messages') }}</span><br>
                    <el-icon class="meta-icon"><i class="fa-solid fa-clock"></i></el-icon>
                    <span>{{ formatDate(conv.timestamp) }}</span>
                  </div>
                </div>
              </div>
              <!-- 如果没有对话记录 -->
              <div v-if="filteredConversations.length === 0" class="empty-tip">
                  {{ searchKeyword ? t('noResults') : t('noChatHistory') }}
              </div>
            </div>
          </el-dialog>
          <div class="button-group">
            <el-tooltip :content="t('clearChat')" placement="top">
              <el-button
                @click="clearMessages"
                class="icon-btn clear-btn"
                type="danger"
                circle>
                <i class="fa-solid fa-trash"></i>
              </el-button>
            </el-tooltip>

            <el-tooltip :content="isInputExpanded ? t('collapseInput') : t('expandInput')" placement="top">
                <el-button 
                    @click="toggleInputExpand"
                    class="icon-btn expand-btn"
                    :type="isInputExpanded ? 'primary' : 'default'"
                    circle>
                    <i :class="isInputExpanded ? 'fa-solid fa-down-left-and-up-right-to-center' : 'fa-solid fa-up-right-and-down-left-from-center'"></i>
                </el-button>
            </el-tooltip>

            <el-tooltip :content="t('chatHistory')" placement="top">
              <el-button
                @click="showHistoryDialog = true"
                class="icon-btn history-btn"
                :type="'default'"
                v-if="!isBtnCollapse"
                circle>
                <i class="fa-solid fa-clock-rotate-left"></i>
              </el-button>
            </el-tooltip>

            <el-tooltip :content="t('uploadFile')" placement="top">
              <el-button
                @click="sendFiles"
                class="icon-btn file-btn"
                :type="hasFiles ? 'primary' : 'default'"
                v-if="!isBtnCollapse"
                circle>
                <i class="fa-solid fa-paperclip"></i>
              </el-button>
            </el-tooltip>

            <el-tooltip :content="t('uploadImage')" placement="top">
              <el-button
                @click="sendImages"
                class="icon-btn image-btn"
                :type="hasImages ? 'primary' : 'default'"
                v-if="!isBtnCollapse"
                circle>
                <i class="fa-solid fa-image"></i>
              </el-button>
            </el-tooltip>

            <el-tooltip :content="t('deepThinking')" placement="top">
              <el-button
                @click="reasonerSettings.enabled = !reasonerSettings.enabled; autoSaveSettings()"
                class="icon-btn deep-think-btn"
                :type="reasonerSettings.enabled ? 'primary' : 'default'"
                v-if="!isBtnCollapse"
                circle>
                <i class="fa-solid fa-atom"></i>
              </el-button>
            </el-tooltip>

            <el-tooltip :content="t('deepResearch')" placement="top">
              <el-button
                @click="toolsSettings.deepsearch.enabled = !toolsSettings.deepsearch.enabled; autoSaveSettings()"
                class="icon-btn deep-search-btn"
                :type="toolsSettings.deepsearch.enabled ? 'primary' : 'default'"
                v-if="!isBtnCollapse"
                circle>
                <i class="fa-solid fa-flask"></i>
              </el-button>
            </el-tooltip>

            <el-tooltip :content="t('vision')" placement="top">
              <el-button
                @click="visionSettings.enabled = !visionSettings.enabled; autoSaveSettings()"
                class="icon-btn vision-btn"
                :type="visionSettings.enabled ? 'primary' : 'default'"
                v-if="!isBtnCollapse"
                circle>
                <i class="fa-solid fa-camera"></i>
              </el-button>
            </el-tooltip>

            <el-tooltip :content="t('text2img')" placement="top">
              <el-button
                @click="text2imgSettings.enabled = !text2imgSettings.enabled; autoSaveSettings()"
                class="icon-btn text2img-btn"
                :type="text2imgSettings.enabled ? 'primary' : 'default'"
                v-if="!isBtnCollapse"
                circle>
                <i class="fa-solid fa-pencil"></i>
              </el-button>
            </el-tooltip>

            <el-tooltip :content="t('asr')" placement="top">
              <el-button
                @click="toggleASR"
                class="icon-btn asr-btn"
                :type="asrSettings.enabled ? 'primary' : 'default'"
                v-if="!isBtnCollapse"
                circle>
                <i class="fa-solid fa-microphone"></i>
              </el-button>
            </el-tooltip>

            <el-tooltip :content="t('tts')" placement="top">
              <el-button
                @click="ttsSettings.enabled=!ttsSettings.enabled;changeTTSstatus();"
                class="icon-btn asr-btn"
                :type="ttsSettings.enabled ? 'primary' : 'default'"
                v-if="!isBtnCollapse"
                circle>
                <i v-if="ttsSettings.enabled" class="fa-solid fa-volume-high"></i>
                <i v-else class="fa-solid fa-volume-xmark"></i>
              </el-button>
            </el-tooltip>

            <el-tooltip :content="t('knowledgeBase')" placement="top">
              <el-button
                @click="showKnowledgeDialog = true"
                class="icon-btn knowledge-base-btn"
                :type="hasEnabledKnowledgeBases ? 'primary' : 'default'"
                v-if="!isBtnCollapse"
                circle>
                <i class="fa-solid fa-book"></i>
              </el-button>
            </el-tooltip>

            <el-tooltip :content="t('webSearch')" placement="top">
              <el-button
                @click="webSearchSettings.enabled = !webSearchSettings.enabled; autoSaveSettings()"
                class="icon-btn web-search-btn"
                :type="webSearchSettings.enabled ? 'primary' : 'default'"
                v-if="!isBtnCollapse"
                circle>
                <i class="fa-solid fa-globe"></i>
              </el-button>
            </el-tooltip>

            <el-tooltip :content="t('memory')" placement="top">
              <el-button
                @click="showMemoryDialog = true"
                class="icon-btn web-search-btn"
                :type="memorySettings.is_memory ? 'primary' : 'default'"
                v-if="!isBtnCollapse"
                circle>
                <i class="fa-solid fa-brain"></i>
              </el-button>
            </el-tooltip>

            <el-tooltip :content="t('interpreter')" placement="top">
              <el-button
                @click="codeSettings.enabled = !codeSettings.enabled; autoSaveSettings()"
                class="icon-btn web-search-btn"
                :type="codeSettings.enabled ? 'primary' : 'default'"
                v-if="!isBtnCollapse"
                circle>
                <i class="fa-solid fa-code"></i>
              </el-button>
            </el-tooltip>

            <el-tooltip :content="t('sticker')" placement="top">
              <el-button
                @click="showStickerPacksDialog = true"
                class="icon-btn sticker-btn"
                :type="hasEnabledStickerPacks ? 'primary' : 'default'"
                v-if="!isBtnCollapse"
                circle>
                <i class="fa-solid fa-face-smile"></i>
              </el-button>
            </el-tooltip>

            <el-tooltip :content="t('agentSnapshot')" placement="top">
              <el-button
                @click="showAgentDialog = true"
                class="icon-btn agent-btn"
                :type="hasAgentChanges ? 'primary' : 'default'"
                v-if="!isBtnCollapse"
                circle>
                <i class="fa-solid fa-robot"></i>
              </el-button>
            </el-tooltip>

            <el-tooltip :content="t('llmTools')" placement="top">
              <el-button
                @click="showLLMToolsDialog = true"
                class="icon-btn llm-tool-btn"
                :type="hasEnabledLLMTools ? 'primary' : 'default'"
                v-if="!isBtnCollapse"
                circle>
                <i class="fa-solid fa-cube"></i>
              </el-button>
            </el-tooltip>

            <el-tooltip :content="t('mcpServers')" placement="top">
              <el-button
                @click="showMCPServerDialog = true"
                class="icon-btn mcp-btn"
                :type="hasEnabledMCPServers ? 'primary' : 'default'"
                v-if="!isBtnCollapse"
                circle>
                <i class="fa-solid fa-server"></i>
              </el-button>
            </el-tooltip>

            <el-tooltip :content="t('a2aServers')" placement="top">
              <el-button
                @click="this.showA2AServerDialog = true"
                class="icon-btn a2a-btn"
                :type="hasEnabledA2AServers ? 'primary' : 'default'"
                v-if="!isBtnCollapse"
                circle>
                <i class="fa-solid fa-network-wired"></i>
              </el-button>
            </el-tooltip>

            <el-tooltip :content="t('customHttpTool')" placement="top">
              <el-button
                @click="this.showHttpToolDialog = true"
                class="icon-btn http-btn"
                :type="hasEnabledHttpTools ? 'primary' : 'default'"
                v-if="!isBtnCollapse"
                circle>
                <i class="fa-solid fa-wifi"></i>
              </el-button>
            </el-tooltip>

            <el-tooltip :content="t('ComfyUI')" placement="top">
              <el-button
                @click="this.showComfyUIDialog = true"
                class="icon-btn comfyui-btn"
                :type="hasEnabledComfyUI ? 'primary' : 'default'"
                v-if="!isBtnCollapse"
                circle>
                <i class="fa-solid fa-palette"></i>
              </el-button>
            </el-tooltip>

            <el-tooltip :content="t('tablePet')" placement="top">
              <el-button
                @click="startVRM"
                class="icon-btn vrm-btn"
                :type="'default'"
                v-if="!isBtnCollapse"
                circle>
                <i :class='isVRMStarting? "fa-solid fa-spinner fa-spin" : "fa-solid fa-user-ninja"'></i>
              </el-button>
            </el-tooltip>

            <el-tooltip :content="isSending ? t('stopGenerating') : t('sendMessage')" placement="top">
              <el-button
                @click="isSending ? stopGenerate() : sendMessage()"
                :type="isSending ? 'danger' : 'primary'"
                class="icon-btn send-btn"
                circle>
                <i :class="isSending ? 'fa-solid fa-stop' : 'fa-solid fa-paper-plane'" aria-hidden="true"></i>
              </el-button>
            </el-tooltip>
            <!--展开收起按钮-->
            <el-tooltip :content="isBtnCollapse ? t('expand') : t('collapse')" placement="top">
              <el-button @click="isBtnCollapse=!isBtnCollapse" class="icon-btn collapse-btn" circle>
                <i :class="isBtnCollapse ? 'fa-solid fa-angle-right' : 'fa-solid fa-angle-left'"></i>
              </el-button>
            </el-tooltip>
          </div>
          <div class="input-container">
            <!-- 紧凑型文件列表 -->
            <div class="compact-file-list" v-if="allItems.length">
              <div v-for="(item, index) in allItems" :key="index" class="compact-file-item">
                <span class="file-name">@{{ item.name }}</span>
                <el-button
                  @click.stop="removeItem(index, item.type)"
                  class="delete-icon"
                  circle
                >
                  <i class="fa-solid fa-trash"></i>
                </el-button>
              </div>
            </div>
            <el-input
                v-model="userInput"
                type="textarea"
                :rows="isInputExpanded ? 16 : 4"
                :placeholder="t('inputMessage')"
                resize="none"
                @keydown="handleKeyDown"
                class="input-box">
            </el-input>
          </div>
        </div>

        <div v-show="activeMenu === 'model-config'" class="page agent-suite-container">
          <div class="suite-layout">
            <!-- 左侧二级导航 -->
            <div class="suite-sidebar">
              <div class="tile-nav">
                <div 
                  v-for="tile in modelTiles" 
                  :key="tile.id"
                  class="nav-item"
                  :class="{ active: subMenu === tile.id }"
                  @click="subMenu = tile.id">
                  <el-icon class="nav-icon"><i :class="tile.icon"></i></el-icon>
                  <span class="nav-text">{{ t(tile.title) }}</span>
                </div>
              </div>
            </div>
            <!-- 右侧内容区 -->
            <div class="suite-content">
              <!-- 模型服务界面 -->
              <div v-show="subMenu === 'service'" class="page">
                <!-- 磁贴网格 -->
                <div class="provider-grid">
                  <!-- 已有供应商磁贴 -->
                  <div class="provider-card" v-for="(provider, index) in modelProviders" :key="provider.id">
                    <div class="card-header">
                      <img 
                        :src="getVendorLogo(provider.vendor)" 
                        class="mini-vendor-logo"
                      />
                      <div class="card-actions">
                        <el-button
                          @click="goToURL(provider)"
                          type="info"
                          circle
                          size="small"
                        >
                        <i class="fa-solid fa-key"></i>
                        </el-button>
                        <el-button
                          @click="fetchModelsForProvider(provider)"
                          type="primary"
                          circle
                          size="small"
                        >
                        <i class="fa-solid fa-magnifying-glass"></i>
                        </el-button>
                        <el-button
                          @click="removeProvider(index)"
                          type="danger"
                          circle
                          size="small"
                        >
                          <i class="fa-solid fa-trash"></i>
                        </el-button>
                      </div>
                    </div>

                    <div class="input-group">
                      <!-- 添加输入框标签 -->
                      <div class="input-item">
                        <label>{{ t('apiAddress') }}</label>
                        <el-input
                          v-model="provider.url"
                          :placeholder="t('apiAddressPlaceholder')"
                          @change="autoSaveSettings"
                        />
                      </div>

                      <div class="input-item">
                        <label>{{ t('apiKey') }}</label>
                        <el-input
                          v-model="provider.apiKey"
                          :placeholder="t('apiKeyPlaceholder')"
                          show-password
                          @change="autoSaveSettings"
                        />
                      </div>

                      <div class="input-item">
                        <label>{{ t('modelId') }}</label>
                        <el-select
                          v-model="provider.modelId"
                          filterable
                          allow-create
                          :placeholder="provider.models?.length ? t('selectOrTypeModel') : t('modelIdPlaceholder')"
                          class="model-select"
                          @change="autoSaveSettings"
                        >
                          <el-option
                            v-for="model in provider.models"
                            :key="model"
                            :label="model"
                            :value="model"
                          />
                        </el-select>
                      </div>
                    </div>
                  </div>
                  <!-- 添加新磁贴 -->
                  <div class="provider-card add-tile" @click="showAddDialog = true">
                    <el-icon :size="40" color="#909399"><i class="fa-solid fa-plus"></i></el-icon>
                    <div style="color: #606266; margin-top: 10px;">{{ t('addNewProvider') }}</div>
                  </div>
                </div>

                <!-- 添加供应商对话框 -->
                <el-dialog
                  v-model="showAddDialog"
                  :title="t('addNewProvider')"
                  width="90%"
                  @closed="newProviderTemp = { vendor: '', url: '' }"
                >
                  <!-- 供应商选择区域 -->
                  <el-form-item :label="t('provider')" required label-position="top">
                    <div class="vendor-grid">
                      <div 
                        v-for="item in vendorOptions" 
                        :key="item.value"
                        class="vendor-card"
                        :class="{ 'selected': newProviderTemp.vendor === item.value }"
                        @click="handleSelectVendor(item.value)"
                      >
                        <img 
                          :src="getVendorLogo(item.value)" 
                          :alt="item.label"
                          class="vendor-logo"
                        />
                        <div class="vendor-name">{{ t(item.label) }}</div>
                      </div>
                    </div>
                  </el-form-item>


                    <el-form-item
                      v-if="newProviderTemp.vendor === 'custom'"
                      :label="t('customURL')"
                      required
                    >
                      <el-input
                        v-model="newProviderTemp.url"
                        placeholder="https://api.example.com/v1"
                      />
                    </el-form-item>

                    <div v-if="newProviderTemp.vendor && newProviderTemp.vendor !== 'custom'">
                      <el-alert
                        :title="t('defaultConfigInfo')"
                        type="info"
                        :closable="false"
                        class="mb-2"
                      >
                        1. {{ t('autoFilledDefaultAPI') }} {{ newProviderTemp.vendor }} URL<br>2. 
                          <el-link
                            type="primary"
                            :underline="false"
                            :href="vendorAPIpage[newProviderTemp.vendor]" 
                            target="_blank"
                          >
                            <el-icon class="mr-1">
                              <i class="fa-solid fa-key"></i>
                            </el-icon>{{ t('gotoAPI') }}
                          </el-link><br>
                        3. {{ t('enterApiKeyThenClick') }}
                      </el-alert>
                    </div>
                  </el-form>

                  <template #footer>
                    <el-button @click="showAddDialog = false">{{ t('cancel') }}</el-button>
                    <el-button
                      type="primary"
                      @click="confirmAddProvider"
                      :disabled="!validProvider"
                    >
                      {{ t('confirmAdd') }}
                    </el-button>
                  </template>
                </el-dialog>
              </div>
              <!-- 主模型界面 -->
              <div v-show="subMenu === 'main'" class="page">
                <el-form :model="settings" class="settings-form" label-position="top">
                  <div class="tool-item">
                    <!-- 基础配置（仅供应商） -->
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon>
                            <i class="fa-solid fa-microchip"></i>
                          </el-icon>
                          {{ t('basicConfiguration') }}
                        </span>
                      </div>
                    </div>
                    <div class="tool-content">
                      <el-form-item :label="t('provider')" class="form-item-align">
                        <el-select
                          v-model="settings.selectedProvider"
                          :placeholder="t('selectProvider')"
                          filterable
                          @change="selectMainProvider"
                          @visible-change="handleMainProviderVisibleChange"
                          class="full-width-input"
                        >
                          <el-option
                            v-for="provider in modelProviders"
                            :key="provider.id"
                            :label="provider.vendor+' - '+provider.modelId"
                            :value="provider.id"
                          >
                            <div class="provider-option">
                              <img 
                                :src="getVendorLogo(provider.vendor)" 
                                class="mini-vendor-logo"
                              />
                              <span class="model-id">{{ provider.modelId }}</span>
                            </div>
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                      <el-alert
                        type="info"
                        :closable="false"
                        class="mb-2"
                      >
                        <template #default>
                          <div class="alert-content">
                            {{ t('firstTimeUse') }}
                            <el-link
                              type="primary"
                              :underline="false"
                              class="font-medium"
                              @click="switchToApiBox"
                            >
                              <el-icon class="mr-1">
                                <i class="fa-solid fa-key"></i>
                              </el-icon>{{ t('keyBoxInterface') }}
                            </el-link>
                            {{ t('addProviderReturnSelect') }}
                            {{ t('mainmodelnotice') }}
                          </div>
                        </template>
                      </el-alert>
                  </div>
                  <!-- 新增高级配置 -->
                  <div class="tool-item">
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon>
                            <i class="fa-solid fa-chevron-right"></i>
                          </el-icon>
                          {{ t('advancedConfiguration') }}
                        </span>
                      </div>
                    </div>
                    <div class="tool-content">
                      <el-form-item :label="t('temperature')" class="form-item-align">
                        <el-slider
                          v-model="settings.temperature"
                          :min="0"
                          :max="1"
                          :step="0.1"
                          @input="autoSaveSettings"
                        />
                      </el-form-item>
                      <el-form-item :label="'top_p'" class="form-item-align">
                        <el-slider
                          v-model="settings.top_p"
                          :min="0"
                          :max="1"
                          :step="0.1"
                          @input="autoSaveSettings"
                        />
                      </el-form-item>
                      <el-form-item :label="t('outputLength')" class="form-item-align">
                        <el-slider
                          v-model="settings.max_tokens"
                          :min="0"
                          :max="128000"
                          :step="1024"
                          @input="autoSaveSettings"
                        />
                      </el-form-item>
                      <el-form-item :label="t('conversationRounds')" class="form-item-align">
                        <el-slider
                          v-model="settings.max_rounds"
                          :min="0"
                          :max="1000"
                          :step="2"
                          @input="autoSaveSettings"
                        />
                      </el-form-item>
                      <div class="param-header">
                        <span>{{ t('extraParams') }}</span>
                        <el-button 
                          @click="addParam"
                          type="primary"
                          circle
                          size="small"
                          class="header-add-btn"
                        >
                          <i class="fa-solid fa-plus"></i>
                        </el-button>
                      </div>
                      <div class="extra-params">
                        <div
                          v-for="(param, index) in settings.extra_params"
                          :key="index"
                          class="param-row"
                        >
                          <el-input
                            v-model="param.name"
                            :placeholder="t('paramName')"
                            class="param-input"
                            @input="autoSaveSettings"
                          ></el-input>
                      
                          <el-select
                            v-model="param.type"
                            :placeholder="t('paramType')"
                            @change="updateParamType(index)"
                            class="type-select"
                          >
                            <el-option
                              v-for="type in paramTypes"
                              :key="type.value"
                              :label="t(type.label)"
                              :value="type.value"
                            ></el-option>
                          </el-select>
                      
                          <!-- 动态输入组件 -->
                          <div class="value-input">
                            <el-input
                              v-show="param.type === 'string'"
                              v-model="param.value"
                              :placeholder="t('paramValue')"
                              @input="autoSaveSettings"
                            ></el-input>
                          
                            <el-input-number
                              v-show="param.type === 'integer'"
                              v-model="param.value"
                              :step="1"         
                              :precision="0"   
                              @input="autoSaveSettings"
                            ></el-input-number>
                          
                            <el-input-number
                              v-show="param.type === 'float'"
                              v-model="param.value"
                              :step="0.5"      
                              :precision="2"    
                              @input="autoSaveSettings"
                            ></el-input-number>
      
                            <el-switch 
                              v-show="param.type === 'boolean'" 
                              v-model="param.value" 
                              @change="autoSaveSettings"
                            ></el-switch>
                          </div>
                      
                          <el-button
                            @click="removeParam(index)"
                            type="danger"
                            circle
                            size="small"
                            class="remove-btn"
                          >
                            <i class="fa-solid fa-trash"></i>
                          </el-button>
                        </div>
                      </div>
                    </div>
                  </div>
                </el-form>
              </div>
              <!-- 推理模型界面 -->
              <div v-show="subMenu === 'reasoner'" class="page">
                <el-form :model="settings" class="settings-form" label-position="top">
                  <div class="tool-item">
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon>
                            <i class="fa-solid fa-atom"></i>
                          </el-icon>
                          {{ t('reasonerConfig') }}
                        </span>
                      </div>
                      <el-switch v-model="reasonerSettings.enabled" @click.stop @change="autoSaveSettings"/>
                    </div>
                    <div class="tool-content">
                      <el-form-item :label="t('reasoningProvider')" class="form-item-align">
                        <el-select
                          v-model="reasonerSettings.selectedProvider"
                          :placeholder="t('selectProvider')"
                          filterable
                          @change="selectReasonerProvider"
                          @visible-change="handleReasonerProviderVisibleChange"
                          class="full-width-input"
                        >
                          <el-option
                            v-for="provider in modelProviders"
                            :key="provider.id"
                            :label="provider.vendor+' - '+provider.modelId"
                            :value="provider.id"
                          >
                            <div class="provider-option">
                              <img 
                                :src="getVendorLogo(provider.vendor)" 
                                class="mini-vendor-logo"
                              />
                              <span class="model-id">{{ provider.modelId }}</span>
                            </div>
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                    <el-alert
                    type="info"
                    :closable="false"
                    class="mb-2"
                  >
                    <template #default>
                      <div class="alert-content">
                        {{ t('firstTimeUse') }}
                        <el-link
                          type="primary"
                          :underline="false"
                          class="font-medium"
                          @click="switchToApiBox"
                        >
                          <el-icon class="mr-1">
                            <i class="fa-solid fa-key"></i>
                          </el-icon>{{ t('keyBoxInterface') }}
                        </el-link>
                        {{ t('addProviderReturnSelect') }}
                        {{ t('addresonerNotice') }}
                      </div>
                    </template>
                  </el-alert>
                  </div>
                  <div class="tool-item">
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon>
                            <i class="fa-solid fa-chevron-right"></i>
                          </el-icon>
                          {{ t('advancedConfiguration') }}
                        </span>
                      </div>
                    </div>
                    <div class="tool-content">
                      <el-form-item :label="t('temperature')" class="form-item-align">
                        <el-slider
                          v-model="reasonerSettings.temperature"
                          :min="0"
                          :max="1"
                          :step="0.1"
                          @input="autoSaveSettings"
                        />
                      </el-form-item>
                    </div>
                  </div>
                </el-form>
              </div>
              <div v-show="subMenu === 'vision'" class="page">
                <el-form :model="settings" class="settings-form" label-position="top">
                  <div class="tool-item">
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon><i class="fa-solid fa-camera"></i></el-icon>
                          {{ t('visionSettings') }}
                        </span>
                      </div>
                      <el-switch v-model="visionSettings.enabled" @click.stop @change="autoSaveSettings"/>
                    </div>
                    <div class="tool-content">
                      <el-form-item :label="t('visionProvider')" class="form-item-align">
                        <el-select
                          v-model="visionSettings.selectedProvider"
                          :placeholder="t('selectProvider')"
                          filterable
                          @change="selectVisionProvider"
                          @visible-change="handleVisionProviderVisibleChange"
                          class="full-width-input"
                        >
                          <el-option
                            v-for="provider in modelProviders"
                            :key="provider.id"
                            :label="provider.vendor+' - '+provider.modelId"
                            :value="provider.id"
                          >
                            <div class="provider-option">
                              <img 
                                :src="getVendorLogo(provider.vendor)" 
                                class="mini-vendor-logo"
                              />
                              <span class="model-id">{{ provider.modelId }}</span>
                            </div>
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                    <el-alert
                    type="info"
                    :closable="false"
                    class="mb-2"
                  >
                    <template #default>
                      <div class="alert-content">
                        {{ t('firstTimeUse') }}
                        <el-link
                          type="primary"
                          :underline="false"
                          class="font-medium"
                          @click="switchToApiBox"
                        >
                          <el-icon class="mr-1">
                            <i class="fa-solid fa-key"></i>
                          </el-icon>{{ t('keyBoxInterface') }}
                        </el-link>
                        {{ t('addProviderReturnSelect') }}
                        {{ t('addVisionNotice') }}
                      </div>
                    </template>
                  </el-alert>
                  </div>
                  <div class="tool-item">
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon>
                            <i class="fa-solid fa-chevron-right"></i>
                          </el-icon>
                          {{ t('advancedConfiguration') }}
                        </span>
                      </div>
                    </div>
                    <div class="tool-content">
                      <el-form-item :label="t('temperature')" class="form-item-align">
                        <el-slider
                          v-model="visionSettings.temperature"
                          :min="0"
                          :max="1"
                          :step="0.1"
                          @input="autoSaveSettings"
                        />
                      </el-form-item>
                    </div>
                  </div>
                </el-form>
              </div>
             <!-- 文生图界面 -->
              <div v-show="subMenu === 'text2img'" class="page">
                <el-form :model="text2imgSettings" class="settings-form"  label-position="top">
                  <div class="tool-item">
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon>
                            <i class="fa-solid fa-pencil"></i>
                          </el-icon>
                          {{ t('text2imgModel') }}
                        </span>
                      </div>
                      <el-switch v-model="text2imgSettings.enabled" @click.stop @change="autoSaveSettings"/>
                    </div>
                    <div class="tool-content">
                      <el-form-item :label="t('text2imgEngine')" class="form-item-align">
                        <el-select
                          v-model="text2imgSettings.engine"
                          @change="autoSaveSettings"
                          class="full-width-input"
                        >
                          <el-option label="Pollinations" value="pollinations" ></el-option>
                          <el-option :label="t('openaiLike')" value="openai" ></el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                  </div>
                  <div class="tool-item" v-show="text2imgSettings.engine === 'pollinations'">
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon>
                            <i class="fa-solid fa-pencil"></i>
                          </el-icon>
                          Pollinations
                        </span>
                      </div>
                    </div>
                    <div class="tool-content">
                      <el-form-item :label="t('model')" class="form-item-align">
                        <el-select
                          v-model="text2imgSettings.pollinations_model"
                          @change="autoSaveSettings"
                          class="full-width-input"
                        >
                          <el-option label="Flux" value="flux" ></el-option>
                          <el-option label="Flux-turbo" value="turbo" ></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item :label="t('width')" class="form-item-align">
                        <el-slider
                          v-model="text2imgSettings.pollinations_width"
                          :min="128"
                          :max="4096"
                          :step="64"
                          @input="autoSaveSettings"
                        />
                      </el-form-item>
                      <el-form-item :label="t('height')" class="form-item-align">
                        <el-slider
                          v-model="text2imgSettings.pollinations_height"
                          :min="128"
                          :max="4096"
                          :step="64"
                          @input="autoSaveSettings"
                        />
                      </el-form-item>
                    </div>
                  </div>
                  <div class="tool-item" v-show="text2imgSettings.engine === 'openai'">
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon>
                            <i class="fa-solid fa-pencil"></i>
                          </el-icon>
                          {{t('openaiLike')}}
                        </span>
                      </div>
                    </div>
                    <div class="tool-content">
                      <el-form-item :label="t('text2imgModelProvider')" class="form-item-align">
                        <el-select
                          v-model="text2imgSettings.selectedProvider"
                          :placeholder="t('selectProvider')"
                          filterable
                          @change="selectText2imgProvider"
                          @visible-change="handleText2imgProviderVisibleChange"
                          class="full-width-input"
                        >
                          <el-option
                            v-for="provider in modelProviders"
                            :key="provider.id"
                            :label="provider.vendor+' - '+provider.modelId"
                            :value="provider.id"
                          >
                            <div class="provider-option">
                              <img 
                                :src="getVendorLogo(provider.vendor)" 
                                class="mini-vendor-logo"
                              />
                              <span class="model-id">{{ provider.modelId }}</span>
                            </div>
                          </el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item :label="t('size')" class="form-item-align">
                        <el-select
                          v-model="text2imgSettings.size"
                          @change="autoSaveSettings"
                          class="full-width-input"
                          v-if="text2imgSettings.vendor == 'siliconflow'"
                        >
                          <el-option label="1024x1024" value="1024x1024" ></el-option>
                          <el-option label="960x1280" value="960x1280" ></el-option>
                          <el-option label="768x1024" value="768x1024" ></el-option>
                          <el-option label="720x1440" value="720x1440" ></el-option>
                          <el-option label="720x1280" value="720x1280" ></el-option>
                        </el-select>
                        <el-select
                          v-model="text2imgSettings.size"
                          @change="autoSaveSettings"
                          class="full-width-input"
                          v-else
                        >
                          <el-option :label="t('auto')" value="auto" ></el-option>
                          <el-option label="1024x1024" value="1024x1024" ></el-option>
                          <el-option label="1536x1024" value="1536x1024" ></el-option>
                          <el-option label="1024x1536" value="1024x1536" ></el-option>
                          <el-option label="256x256" value="256x256" ></el-option>
                          <el-option label="512x512" value="512x512" ></el-option>
                          <el-option label="1792x1024" value="1792x1024" ></el-option>
                          <el-option label="1024x1792" value="1024x1792" ></el-option>                          
                        </el-select>                        
                      </el-form-item>
                    </div>
                    <el-alert
                      type="info"
                      :closable="false"
                      class="mb-2"
                    >
                      <template #default>
                        <div class="alert-content">
                          {{ t('firstTimeUse') }}
                          <el-link
                            type="primary"
                            :underline="false"
                            class="font-medium"
                            @click="switchToApiBox"
                          >
                            <el-icon class="mr-1">
                              <i class="fa-solid fa-key"></i>
                            </el-icon>{{ t('keyBoxInterface') }}
                          </el-link>
                          {{ t('addProviderReturnSelect') }}
                          {{ t('addText2imgNotice') }}
                        </div>
                      </template>
                    </el-alert>
                  </div>
                </el-form>
              </div>
             <!-- 语音识别界面 -->
              <div v-show="subMenu === 'asr'" class="page">
                <el-form :model="asrSettings" class="settings-form"  label-position="top">
                  <div class="tool-item">
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon>
                            <i class="fa-solid fa-microphone"></i>
                          </el-icon>
                          {{ t('asrModel') }}
                        </span>
                      </div>
                      <el-switch v-model="asrSettings.enabled" @click.stop @change="handleASRchange"/>
                    </div>
                    <div class="tool-content">
                      <el-form-item :label="t('asrEngine')" class="form-item-align">
                        <el-select
                          v-model="asrSettings.engine"
                          @change="autoSaveSettings();handleASRchange();"
                          class="full-width-input"
                        >
                          <el-option :label="t('webSpeech')" value="webSpeech" ></el-option>
                          <el-option :label="t('openaiLike')" value="openai" ></el-option>
                          <el-option label="FunASR" value="funasr" ></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item :label="t('interactionMethod')" class="form-item-align">
                        <el-select
                          v-model="asrSettings.interactionMethod"
                          @change="autoSaveSettings"
                          class="full-width-input"
                        >
                          <el-option :label="t('auto')" value="auto" ></el-option>
                          <el-option :label="t('manual')" value="manual" ></el-option>
                          <el-option :label="t('wakeWord')" value="wakeWord" ></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item :label="t('hotkey')" class="form-item-align">
                        <el-select
                          v-model="asrSettings.hotkey"
                          @change="autoSaveSettings"
                          class="full-width-input"
                        >
                          <el-option label="Alt" value="Alt" ></el-option>
                          <el-option :label="t('Space')" value=" " ></el-option>
                          <el-option label="Ctrl" value="Control" ></el-option>
                          <el-option label="Shift" value="Shift" ></el-option>
                          <el-option label="CapsLock" value="CapsLock" ></el-option>
                          <el-option label="Tab" value="Tab" ></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item :label="t('wakeWordMode')" class="form-item-align">
                        <el-input
                          v-model="asrSettings.wakeWord"
                          :placeholder="t('wakeWordPlaceholder')"
                          @input="autoSaveSettings"
                          class="full-width-input"
                        />
                      </el-form-item>
                    </div>
                  </div>
                  <div class="tool-item" v-show="asrSettings.engine === 'webSpeech'">
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon>
                            <i class="fa-solid fa-microphone"></i>
                          </el-icon>
                          {{t('webSpeechAPI')}}
                        </span>
                      </div>
                    </div>
                    <div class="tool-content">
                      <el-form-item :label="t('language')" class="form-item-align">
                        <el-select
                          v-model="asrSettings.webSpeechLanguage"
                          :placeholder="t('selectProvider')"
                          filterable
                          @change="autoSaveSettings"
                          class="full-width-input"
                        >
                          <el-option key="auto" :label="t('auto')" value="auto"></el-option>
                          <el-option
                            v-for="language in supportedLanguages"
                            :key="language.code"
                            :label="language.name"
                            :value="language.code"
                          >
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                    <el-alert
                      type="info"
                      :closable="false"
                      class="mb-2"
                    >
                      <template #default>
                        <div class="alert-content">
                          {{ t('webSpeechNotice1') }}
                        </div>
                      </template>
                    </el-alert>
                  </div>
                  <div class="tool-item" v-show="asrSettings.engine === 'openai'">
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon>
                            <i class="fa-solid fa-microphone"></i>
                          </el-icon>
                          {{t('openaiLike')}}
                        </span>
                      </div>
                    </div>
                    <div class="tool-content">
                      <el-form-item :label="t('asrModelProvider')" class="form-item-align">
                        <el-select
                          v-model="asrSettings.selectedProvider"
                          :placeholder="t('selectProvider')"
                          filterable
                          @change="selectAsrProvider"
                          @visible-change="handleAsrProviderVisibleChange"
                          class="full-width-input"
                        >
                          <el-option
                            v-for="provider in modelProviders"
                            :key="provider.id"
                            :label="provider.vendor+' - '+provider.modelId"
                            :value="provider.id"
                          >
                            <div class="provider-option">
                              <img 
                                :src="getVendorLogo(provider.vendor)" 
                                class="mini-vendor-logo"
                              />
                              <span class="model-id">{{ provider.modelId }}</span>
                            </div>
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                    <el-alert
                      type="info"
                      :closable="false"
                      class="mb-2"
                    >
                      <template #default>
                        <div class="alert-content">
                          {{ t('firstTimeUse') }}
                          <el-link
                            type="primary"
                            :underline="false"
                            class="font-medium"
                            @click="switchToApiBox"
                          >
                            <el-icon class="mr-1">
                              <i class="fa-solid fa-key"></i>
                            </el-icon>{{ t('keyBoxInterface') }}
                          </el-link>
                          {{ t('addProviderReturnSelect') }}
                          {{ t('addAsrNotice') }}
                        </div>
                      </template>
                    </el-alert>
                  </div>
                  <div class="tool-item" v-show="asrSettings.engine === 'funasr'">
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon>
                            <i class="fa-solid fa-microphone"></i>
                          </el-icon>
                          FunASR
                          <el-link
                            type="primary"
                            :underline="false"
                            href="https://github.com/modelscope/FunASR" 
                            target="_blank"
                          >
                            <el-icon class="mr-1">
                              <i class="fa-solid fa-key"></i>
                            </el-icon>{{ t('gotoGithub') }}
                          </el-link>
                        </span>
                      </div>
                    </div>
                    <div class="tool-content">
                      <el-form-item :label="t('funasrURL')" class="form-item-align">
                        <el-input
                          v-model="asrSettings.funasr_ws_url"
                          :placeholder="t('funasrURLPlaceholder')"
                          @input="autoSaveSettings"
                          class="full-width-input"
                        />
                      </el-form-item>
                      <el-form-item :label="t('mode')" class="form-item-align">
                        <el-select
                          v-model="asrSettings.funasr_mode"
                          @change="autoSaveSettings"
                          class="full-width-input"
                        >
                          <el-option :label="t('online')" value="2pass" ></el-option>
                          <el-option :label="t('offline')" value="offline" ></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item :label="t('hotwords')" class="form-item-align">
                        <el-input
                          v-model="asrSettings.hotwords"
                          :placeholder="t('hotwordsPlaceholder')"
                          @input="autoSaveSettings"
                          type="textarea"
                          :rows="2"
                        />
                      </el-form-item>
                    </div>
                    <el-alert
                      type="info"
                      :closable="false"
                      class="mb-2"
                    >
                      <template #default>
                        <div class="alert-content">
                          {{ t('funasrNotice1') }}<br>
                          {{ t('funasrNotice2') }}
                        </div>
                      </template>
                    </el-alert>
                  </div>
                </el-form>
              </div>
              <!-- 语音合成界面 -->
              <div v-show="subMenu === 'tts'" class="page">
                <el-form :model="ttsSettings" class="settings-form"  label-position="top">
                  <div class="tool-item">
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon>
                            <i class="fa-solid fa-volume-high"></i>
                          </el-icon>
                          {{ t('ttsModel') }}
                        </span>
                      </div>
                      <el-switch v-model="ttsSettings.enabled" @click.stop @change="changeTTSstatus" />
                    </div>
                    <div class="tool-content">
                      <el-form-item :label="t('ttsEngine')" class="form-item-align">
                        <el-select
                          v-model="ttsSettings.engine"
                          @change="autoSaveSettings"
                          class="full-width-input"
                        >
                          <el-option label="Edge TTS" value="edgetts" ></el-option>
                          <el-option label="GPT Sovits" value="GSV" ></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item :label="t('separators')">
                        <el-select
                          v-model="ttsSettings.separators"
                          multiple
                          filterable
                          allow-create
                          @keyup.enter.native="handleEnter"
                          @create="handleCreateSeparator"
                        >
                          <el-option
                            v-for="sep in filteredSeparators"
                            :key="sep.value"
                            :label="sep.label"
                            :value="sep.value"
                          />
                        </el-select>
                      </el-form-item>
                      <el-form-item :label="t('enabledInterruption')" class="form-item-align" label-position="left">
                        <el-switch 
                          v-model="ttsSettings.enabledInterruption" 
                          @change="autoSaveSettings"
                        ></el-switch>
                      </el-form-item>
                    <el-form-item :label="t('maxConcurrency')" class="form-item-align">
                      <el-slider
                        v-model="ttsSettings.maxConcurrency"
                        :min="1"
                        :max="16"
                        :step="1"
                        @change="autoSaveSettings">
                    </el-form-item>
                    </div>
                  </div>
                  <div class="tool-item" v-show="ttsSettings.engine === 'edgetts'">
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon>
                            <i class="fa-solid fa-volume-high"></i>
                          </el-icon>
                          Edge TTS
                        </span>
                      </div>
                    </div>
                    <div class="tool-content">
                      <!-- 语速滑动条 -->
                      <el-form-item :label="t('edgettsRate')" class="form-item-align">
                        <el-slider
                          v-model="ttsSettings.edgettsRate"
                          :min="0.1"
                          :max="2"
                          :step="0.1"
                          @change="autoSaveSettings">
                      </el-form-item>
                      <!-- 语言选择框 -->
                      <el-form-item :label="t('edgettsLanguage')" class="form-item-align">
                        <el-select
                          v-model="edgettsLanguage"
                          @change="updateLanguages"
                          class="full-width-input"
                        >
                          <el-option
                            v-for="language in uniqueLanguages"
                            :key="language"
                            :label="language"
                            :value="language"
                          ></el-option>
                        </el-select>
                      </el-form-item>

                      <!-- 性别选择框 -->
                      <el-form-item :label="t('edgettsGender')" class="form-item-align">
                        <el-select
                          v-model="edgettsGender"
                          @change="updateGenders"
                          class="full-width-input"
                        >
                          <el-option
                            v-for="gender in uniqueGenders"
                            :key="gender"
                            :label="t(gender)"
                            :value="gender"
                          ></el-option>
                        </el-select>
                      </el-form-item>

                      <!-- 语音选择框 -->
                      <el-form-item :label="t('edgettsVoice')" class="form-item-align">
                        <el-select
                          v-model="ttsSettings.edgettsVoice"
                          class="full-width-input"
                          @change="updateVoices"
                        >
                          <el-option
                            v-for="voice in filteredVoices"
                            :key="voice.name"
                            :label="voice.name"
                            :value="voice.name"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                  </div>
                  <div class="tool-item" v-show="ttsSettings.engine === 'GSV'">
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon>
                            <i class="fa-solid fa-volume-high"></i>
                          </el-icon>
                          GPT Sovits
                          <el-link
                            type="primary"
                            :underline="false"
                            href="https://github.com/RVC-Boss/GPT-SoVITS" 
                            target="_blank"
                          >
                            <el-icon class="mr-1">
                              <i class="fa-solid fa-key"></i>
                            </el-icon>{{ t('gotoGithub') }}
                          </el-link>
                        </span>
                      </div>
                    </div>
                    <div class="tool-content">
                      <el-form-item :label="t('gsvServer')" class="form-item-align">
                        <el-input
                          v-model="ttsSettings.gsvServer"
                          :placeholder="t('gsvServerPlaceholder')"
                          @input="autoSaveSettings"
                          class="full-width-input"
                        />
                      </el-form-item>

                      <!-- 语速滑动条 -->
                      <el-form-item :label="t('gsvRate')" class="form-item-align">
                        <el-slider
                          v-model="ttsSettings.gsvRate"
                          :min="0.1"
                          :max="2"
                          :step="0.1"
                          @change="autoSaveSettings">
                      </el-form-item>

                      <!-- 语言选择框 -->
                      <el-form-item :label="t('gsvTextLang')" class="form-item-align">
                        <el-select
                          v-model="ttsSettings.gsvTextLang"
                          @change="autoSaveSettings"
                          class="full-width-input"
                        >
                          <el-option
                            v-for="language in gsvTextLangs"
                            :key="language"
                            :label="t(language)"
                            :value="language"
                          ></el-option>
                        </el-select>
                      </el-form-item>

                      <!-- 提示语言选择框 -->
                      <el-form-item :label="t('gsvPromptLang')" class="form-item-align">
                        <el-select
                          v-model="ttsSettings.gsvPromptLang"
                          @change="autoSaveSettings"
                          class="full-width-input"
                        >
                          <el-option
                            v-for="language in gsvTextLangs"
                            :key="language"
                            :label="t(language)"
                            :value="language"
                          ></el-option>
                        </el-select>
                      </el-form-item>

                      <!-- 提示音频选择框 -->
                      <el-form-item :label="t('gsvPromptAudio')" class="form-item-align">
                        <el-select
                          v-model="ttsSettings.gsvRefAudioPath"
                          @change="handleRefAudioPathChange"
                          class="full-width-input"
                        >
                          <el-option
                            v-for="audio in ttsSettings.gsvAudioOptions"
                            :key="audio.path"
                            :label="audio.name"
                            :value="audio.path"
                          >
                            <div class="model-option-item">
                              <span>{{ audio.name }}</span>
                              <i 
                                class="fa-solid fa-trash-can"
                                style="color: #ff0000"
                                @click.stop="deleteAudioOption(audio.path)"
                              ></i>
                            </div>
                          </el-option>
                        </el-select>
                      </el-form-item>

                      <el-button 
                        @click="showGsvRefAudioPathDialog = true;currentUploadType='audio'"
                        type="primary" 
                        plain 
                        class="add-server-btn">
                        <i class="fa-solid fa-plus"></i> {{ t('addRefAudio') }}
                      </el-button>

                      <el-alert
                        type="info"
                        :closable="false"
                        class="mb-2"
                      >
                        <template #default>
                          <div class="alert-content">
                            {{ t('gsvNotice1') }}<br>
                            {{ t('gsvNotice2') }}
                          </div>
                        </template>
                      </el-alert>
                    </div>
                  </div>
                  <!-- 音频上传对话框 -->
                  <el-dialog
                    v-model="showGsvRefAudioPathDialog"
                    :title="t('uploadGsvRefAudio')"
                    width="600px"
                  >
                    <div class="upload-container">
                      <div
                        class="drop-zone"
                        @dragover.prevent
                        @drop.prevent="handleGsvRefAudioDrop"
                        @click="browseGsvRefAudioFile"
                      >
                        <el-icon :size="50"><i class="fa-solid fa-upload"></i></el-icon>
                        <p>{{ t('clickOrDrop') }}</p>
                      </div>
                      
                      <!-- 文件列表 -->
                      <div class="compact-file-list" v-if="newGsvAudio.name">
                        <div class="compact-file-item">
                          <span class="file-name">@{{ newGsvAudio.name }}</span>
                          <el-button
                            @click.stop="removeNewGsvAudio"
                            class="delete-icon"
                            circle
                          >
                            <i class="fa-solid fa-trash"></i>
                          </el-button>
                        </div>
                      </div>

                      <el-input
                        v-model="newGsvAudio.text"
                        :label="t('gsvPromptText')"
                        :placeholder="t('gsvPromptTextPlaceholder')"
                      />
                    </div>
                    <template #footer>
                      <el-button @click="cancelGsvAudioUpload">{{ t('cancel') }}</el-button>
                      <el-button type="primary" @click="uploadGsvAudio" :disabled="!newGsvAudio.name">
                        {{ t('createImmediately') }}
                      </el-button>
                    </template>
                  </el-dialog>
                </el-form>
              </div>
            </div>
          </div>
        </div>

        <div v-show="activeMenu === 'toolkit'" class="page agent-suite-container">
          <div class="suite-layout">
            <!-- 左侧导航 -->
            <div class="suite-sidebar">
              <div class="tile-nav">
                <div 
                  v-for="tile in toolkitTiles" 
                  :key="tile.id"
                  class="nav-item"
                  :class="{ active: subMenu === tile.id }"
                  @click="subMenu = tile.id">
                  <el-icon class="nav-icon"><i :class="tile.icon"></i></el-icon>
                  <span class="nav-text">{{ t(tile.title) }}</span>
                </div>
              </div>
            </div>
            <!-- 右侧内容 -->
            <div class="suite-content">
              <!-- 工具界面 -->
              <div v-show="subMenu === 'tools'" class="page">
                <div class="provider-grid">
                  <!-- 异步工具 -->
                  <div class="provider-card tool-card">
                    <div class="card-header">
                      <el-switch 
                        v-model="toolsSettings.asyncTools.enabled" 
                        @change="autoSaveSettings"
                        class="tool-switch"
                      ></el-switch>
                    </div>
                    <div class="tool-card-title">
                      <h3 class="kb-title">{{ t('asyncTools') }}</h3>
                    </div>
                    <el-alert type="info" :closable="false" class="mb-2">
                      <div class="alert-content">
                        {{ t('asyncToolsNotice') }}
                      </div>
                    </el-alert>
                  </div>

                  <!-- 当前时间工具 -->
                  <div class="provider-card tool-card">
                    <div class="card-header">
                      <el-switch 
                        v-model="toolsSettings.time.enabled" 
                        @change="autoSaveSettings"
                        class="tool-switch"
                      ></el-switch>
                    </div>
                    <div class="tool-card-title">
                      <h3 class="kb-title">{{ t('currentTime') }}</h3>
                    </div>
                    <el-form-item :label="t('triggerMode')">
                      <el-select
                        v-model="toolsSettings.time.triggerMode"
                        @change="autoSaveSettings"
                      >
                          <el-option :label="t('beforeThinking')" value="beforeThinking" ></el-option>
                          <el-option :label="t('afterThinking')" value="afterThinking" ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-alert type="info" :closable="false" class="mb-2">
                      <div class="alert-content">
                        {{ t('currentTimeNotice') }}
                      </div>
                    </el-alert>
                  </div>

                  <!-- 当前天气工具 -->
                  <div class="provider-card tool-card">
                    <div class="card-header">
                      <el-switch 
                        v-model="toolsSettings.accuweather.enabled" 
                        @change="autoSaveSettings"
                        class="tool-switch"
                      ></el-switch>
                    </div>
                    <div class="tool-card-title">
                      <h3 class="kb-title">
                        {{ t('accuweather') }}
                      </h3>
                      <el-link
                        type="primary"
                        :underline="false"
                        href="https://developer.accuweather.com/apis" 
                        target="_blank"
                      >
                        <el-icon class="mr-1">
                          <i class="fa-solid fa-key"></i>
                        </el-icon>{{ t('gotoAPI') }}
                      </el-link>
                    </div>
                    <el-form-item :label="t('apiKey')">
                      <el-input
                        v-model="toolsSettings.accuweather.apiKey"
                        @change="autoSaveSettings"
                        class="mini-input"
                        :placeholder="t('apiKeyPlaceholder')"
                        show-password
                      ></el-input>
                    </el-form-item>
                    <el-alert type="info" :closable="false" class="mb-2">
                      <div class="alert-content">
                        {{ t('accuweatherNotice') }}
                      </div>
                    </el-alert>
                  </div>

                  <!-- 维基百科工具 -->
                  <div class="provider-card tool-card">
                    <div class="card-header">
                      <el-switch 
                        v-model="toolsSettings.wikipedia.enabled" 
                        @change="autoSaveSettings"
                        class="tool-switch"
                      ></el-switch>
                    </div>
                    <div class="tool-card-title">
                      <h3 class="kb-title">
                        {{ t('wikipedia') }}
                      </h3>
                    </div>
                    <el-alert type="info" :closable="false" class="mb-2">
                      <div class="alert-content">
                        {{ t('wikipediaNotice') }}
                      </div>
                    </el-alert>
                  </div>

                  <!-- arxiv工具 -->
                  <div class="provider-card tool-card">
                    <div class="card-header">
                      <el-switch 
                        v-model="toolsSettings.arxiv.enabled" 
                        @change="autoSaveSettings"
                        class="tool-switch"
                      ></el-switch>
                    </div>
                    <div class="tool-card-title">
                      <h3 class="kb-title">
                        {{ t('arxiv') }}
                      </h3>
                    </div>
                    <el-alert type="info" :closable="false" class="mb-2">
                      <div class="alert-content">
                        {{ t('arxivNotice') }}
                      </div>
                    </el-alert>
                  </div>

                  <!-- 工具结果备忘录 -->
                  <div class="provider-card tool-card">
                    <div class="card-header">
                      <el-switch 
                        v-model="toolsSettings.toolMemorandum.enabled" 
                        @change="autoSaveSettings"
                        class="tool-switch"
                      ></el-switch>
                    </div>
                    <div class="tool-card-title">
                      <h3 class="kb-title">
                        {{ t('toolMemorandum') }}
                      </h3>
                    </div>
                    <el-alert type="info" :closable="false" class="mb-2">
                      <div class="alert-content">
                        {{ t('toolMemorandumNotice') }}
                      </div>
                    </el-alert>
                  </div>

                  <!-- 存储空间文件查询工具 -->
                  <div class="provider-card tool-card">
                    <div class="card-header">
                      <el-switch 
                        v-model="toolsSettings.getFile.enabled" 
                        @change="autoSaveSettings"
                        class="tool-switch"
                      ></el-switch>
                    </div>
                    <div class="tool-card-title">
                      <h3 class="kb-title">{{ t('fileGet') }}</h3>
                    </div>
                    <el-alert type="info" :closable="false" class="mb-2">
                      <div class="alert-content">
                        {{ t('fileGetNotice') }}
                      </div>
                    </el-alert>
                  </div>

                  <!-- 深度研究工具 -->
                  <div class="provider-card tool-card">
                    <div class="card-header">
                      <el-switch
                        v-model="toolsSettings.deepsearch.enabled"
                        @change="autoSaveSettings"
                        class="tool-switch"
                      ></el-switch>
                    </div>
                    <div class="tool-card-title">
                      <h3 class="kb-title">{{ t('deepResearch') }}</h3>
                    </div>
                    <el-alert type="info" :closable="false" class="mb-2">
                      <div class="alert-content">
                        {{ t('deepResearchNotice') }}
                      </div>
                    </el-alert>
                  </div>
        
                  <!-- 推理工具 -->
                  <div class="provider-card tool-card">
                    <div class="card-header">
                      <el-switch
                        v-model="toolsSettings.inference.enabled"
                        @change="autoSaveSettings"
                        class="tool-switch"
                      ></el-switch>
                    </div>
                    <div class="tool-card-title">
                      <h3 class="kb-title">{{ t('fakeInference') }}</h3>
                    </div>
                    <el-alert type="info" :closable="false" class="mb-2">
                      <div class="alert-content">
                        {{ t('fakeInferenceNotice') }}
                      </div>
                    </el-alert>
                  </div>
        
                  <!-- LaTeX增强工具 -->
                  <div class="provider-card tool-card">
                    <div class="card-header">
                      <el-switch
                        v-model="toolsSettings.formula.enabled"
                        @change="autoSaveSettings"
                        class="tool-switch"
                      ></el-switch>
                    </div>
                    <div  class="tool-card-title">
                      <h3 class="kb-title">{{ t('latexRenderingEnhancement') }}</h3>
                    </div>
                    <el-alert type="info" :closable="false" class="mb-2">
                      <div class="alert-content">
                        {{ t('latexRenderingEnhancementNotice') }}
                      </div>
                    </el-alert>
                  </div>
        
                  <!-- 语言语调工具 -->
                  <div class="provider-card tool-card">
                    <div class="card-header">
                      <el-switch
                        v-model="toolsSettings.language.enabled"
                        @change="autoSaveSettings"
                        class="tool-switch"
                      ></el-switch>
                    </div>
                    <div class="tool-card-title">
                      <h3 class="kb-title">{{ t('languageTone') }}</h3>
                    </div>
                    <el-form-item :label="t('assistantLanguage')">
                      <el-input
                        v-model="toolsSettings.language.language"
                        @change="autoSaveSettings"
                        class="mini-input"
                        :placeholder="t('languagePlaceholder')"
                      ></el-input>
                    </el-form-item>
                    
                    <el-form-item :label="t('assistantTone')">
                      <el-input
                        v-model="toolsSettings.language.tone"
                        @change="autoSaveSettings"
                        class="mini-input"
                        :placeholder="t('tonePlaceholder')"
                      ></el-input>
                    </el-form-item>
                    <el-alert type="info" :closable="false" class="mb-2">
                      <div class="alert-content">
                        {{ t('languageNotice') }}
                      </div>
                    </el-alert>
                  </div>
                </div>
              </div>

              <!-- 代码解释器界面 -->
              <div v-show="subMenu === 'interpreter'" class="page">
                <el-form :model="codeSettings" class="settings-form"  label-position="top">
                  <div class="tool-item">
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon>
                            <i class="fa-solid fa-code"></i>
                          </el-icon>
                          {{ t('interpreter') }}
                        </span>
                      </div>
                      <el-switch v-model="codeSettings.enabled" @click.stop @change="autoSaveSettings"/>
                    </div>
                    <div class="tool-content">
                      <el-form-item :label="t('codeEngine')" class="form-item-align">
                        <el-select
                          v-model="codeSettings.engine"
                          @change="autoSaveSettings"
                          class="full-width-input"
                        >
                          <el-option label="E2B" value="e2b" ></el-option>
                          <el-option label="Sandbox Fusion" value="sandbox" ></el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                  </div>
                  <div class="tool-item" v-show="codeSettings.engine === 'e2b'">
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon>
                            <i class="fa-solid fa-code"></i>
                          </el-icon>
                          E2B
                          <el-link
                            type="primary"
                            :underline="false"
                            href="https://e2b.dev/" 
                            target="_blank"
                          >
                            <el-icon class="mr-1">
                              <i class="fa-solid fa-key"></i>
                            </el-icon>{{ t('gotoAPI') }}
                          </el-link>
                        </span>
                      </div>
                    </div>
                    <div class="tool-content">
                      <el-form-item :label="t('apiKey')" class="form-item-align">
                        <el-input
                          v-model="codeSettings.e2b_api_key"
                          :placeholder="t('e2bAPIKeyPlaceholder')"
                          show-password
                          @input="autoSaveSettings"
                          class="full-width-input"
                        />
                      </el-form-item>
                    </div>
                  </div>
                  <div class="tool-item" v-show="codeSettings.engine === 'sandbox'">
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon>
                            <i class="fa-solid fa-code"></i>
                          </el-icon>
                          Sandbox Fusion
                          <el-link
                            type="primary"
                            :underline="false"
                            href="https://github.com/bytedance/SandboxFusion" 
                            target="_blank"
                          >
                            <el-icon class="mr-1">
                              <i class="fa-solid fa-key"></i>
                            </el-icon>{{ t('gotoGithub') }}
                          </el-link>
                        </span>
                      </div>
                    </div>
                    <div class="tool-content">
                      <el-form-item :label="t('baseURL')" class="form-item-align">
                        <el-input
                          v-model="codeSettings.sandbox_url"
                          :placeholder="t('sandboxURLPlaceholder')"
                          @input="autoSaveSettings"
                          class="full-width-input"
                        />
                      </el-form-item>
                    </div>
                  </div>
                </el-form> 
              </div>
              <!-- 联网搜索界面 -->
              <div v-show="subMenu === 'websearch'" class="page">
                <el-form :model="webSearchSettings" class="settings-form"  label-position="top">
                  <div class="tool-item">
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon>
                            <i class="fa-solid fa-globe"></i>
                          </el-icon>
                          {{ t('webSearch') }}
                        </span>
                      </div>
                      <el-switch v-model="webSearchSettings.enabled" @click.stop @change="autoSaveSettings"/>
                    </div>
                    <div class="tool-content">
                      <el-form-item :label="t('searchEngine')" class="form-item-align">
                        <el-select
                          v-model="webSearchSettings.engine"
                          @change="autoSaveSettings"
                          class="full-width-input"
                        >
                          <el-option label="DuckDuckGo" value="duckduckgo" ></el-option>
                          <el-option label="SearXNG" value="searxng" ></el-option>
                          <el-option label="Tavily" value="tavily" ></el-option>
                          <el-option label="Bing" value="bing" ></el-option>
                          <el-option label="Google" value="google" ></el-option>
                          <el-option label="Brave" value="brave" ></el-option>
                          <el-option label="Exa" value="exa" ></el-option>
                          <el-option label="Serper" value="serper" ></el-option>
                          <el-option label="Bochaai" value="bochaai" ></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item :label="t('webCrawling')" class="form-item-align">
                        <el-select
                          v-model="webSearchSettings.crawler"
                          @change="autoSaveSettings"
                          class="full-width-input"
                        >
                          <el-option label="Jina" value="jina" ></el-option>
                          <el-option label="Crawl4AI" value="crawl4ai" ></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item :label="t('webSearchTiming')" class="form-item-align">
                        <el-select
                          v-model="webSearchSettings.when"
                          @change="autoSaveSettings"
                          class="full-width-input"
                        >
                          <el-option :label="t('beforeThinking')" value="before_thinking" ></el-option>
                          <el-option :label="t('afterThinking')" value="after_thinking" ></el-option>
                          <el-option :label="t('both')" value="both" ></el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                  </div>
                  <div class="tool-item" v-show="webSearchSettings.engine === 'duckduckgo'">
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon>
                            <i class="fa-solid fa-globe"></i>
                          </el-icon>
                          DuckDuckGo
                        </span>
                      </div>
                    </div>
                    <div class="tool-content">
                      <el-form-item :label="t('resultCount')" class="form-item-align">
                        <el-slider
                          v-model="webSearchSettings.duckduckgo_max_results"
                          :min="1"
                          :max="20"
                          :step="1"
                          @input="autoSaveSettings"
                        />
                      </el-form-item>
                    </div>
                  </div>
                  <div class="tool-item" v-show="webSearchSettings.engine === 'searxng'">
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon>
                            <i class="fa-solid fa-globe"></i>
                          </el-icon>
                          SearXNG
                          <el-link
                            type="primary"
                            :underline="false"
                            href="https://github.com/searxng/searxng" 
                            target="_blank"
                          >
                            <el-icon class="mr-1">
                              <i class="fa-solid fa-key"></i>
                            </el-icon>{{ t('gotoGithub') }}
                          </el-link>
                        </span>
                      </div>
                    </div>
                    <div class="tool-content">
                      <el-form-item :label="t('resultCount')" class="form-item-align">
                        <el-slider
                          v-model="webSearchSettings.searxng_max_results"
                          :min="1"
                          :max="20"
                          :step="1"
                          @input="autoSaveSettings"
                        />
                      </el-form-item>
                      <el-form-item :label="t('baseURL')" class="form-item-align">
                        <el-input
                          v-model="webSearchSettings.searxng_url"
                          :placeholder="t('searxngURLPlaceholder')"
                          @input="autoSaveSettings"
                          class="full-width-input"
                        />
                      </el-form-item>
                    </div>
                  </div>
                  <div class="tool-item" v-show="webSearchSettings.engine === 'tavily'">
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon>
                            <i class="fa-solid fa-globe"></i>
                          </el-icon>
                          Tavily
                          <el-link
                            type="primary"
                            :underline="false"
                            href="https://app.tavily.com/home" 
                            target="_blank"
                          >
                            <el-icon class="mr-1">
                              <i class="fa-solid fa-key"></i>
                            </el-icon>{{ t('gotoAPI') }}
                          </el-link>
                        </span>
                      </div>
                    </div>
                    <div class="tool-content">
                      <el-form-item :label="t('resultCount')" class="form-item-align">
                        <el-slider
                          v-model="webSearchSettings.tavily_max_results"
                          :min="1"
                          :max="20"
                          :step="1"
                          @input="autoSaveSettings"
                        />
                      </el-form-item>
                      <el-form-item :label="t('apiKey')" class="form-item-align">
                        <el-input
                          v-model="webSearchSettings.tavily_api_key"
                          :placeholder="t('apiKeyPlaceholder')"
                          show-password
                          @input="autoSaveSettings"
                          class="full-width-input"
                        />
                      </el-form-item>
                    </div>
                  </div>
                  <!-- Bing 配置块 -->
                  <div class="tool-item" v-show="webSearchSettings.engine === 'bing'">
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon>
                            <i class="fa-solid fa-globe"></i>
                          </el-icon>
                          Bing
                          <el-link
                            type="primary"
                            :underline="false"
                            href="https://learn.microsoft.com/en-us/bing/search-apis/bing-web-search/create-bing-search-service-resource"
                            target="_blank"
                          >
                            <el-icon class="mr-1">
                              <i class="fa-solid fa-key"></i>
                            </el-icon>{{ t('gotoAPI') }}
                          </el-link>
                        </span>
                      </div>
                    </div>
                    <div class="tool-content">
                      <el-form-item :label="t('resultCount')" class="form-item-align">
                        <el-slider
                          v-model="webSearchSettings.bing_max_results"
                          :min="1"
                          :max="20"
                          :step="1"
                          @input="autoSaveSettings"
                        />
                      </el-form-item>
                      <el-form-item :label="t('apiKey')" class="form-item-align">
                        <el-input
                          v-model="webSearchSettings.bing_api_key"
                          :placeholder="t('apiKeyPlaceholder')"
                          show-password
                          @input="autoSaveSettings"
                          class="full-width-input"
                        />
                      </el-form-item>
                      <el-form-item :label="t('searchEndpoint')" class="form-item-align">
                        <el-input
                          v-model="webSearchSettings.bing_search_url"
                          placeholder="https://api.bing.microsoft.com/v7.0/search"
                          @input="autoSaveSettings"
                          class="full-width-input"
                        />
                      </el-form-item>
                    </div>
                  </div>

                  <!-- Google 配置块 -->
                  <div class="tool-item" v-show="webSearchSettings.engine === 'google'">
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon>
                            <i class="fa-solid fa-globe"></i>
                          </el-icon>
                          Google
                          <el-link
                            type="primary"
                            :underline="false"
                            href="https://console.cloud.google.com/apis/credentials"
                            target="_blank"
                          >
                            <el-icon class="mr-1">
                              <i class="fa-solid fa-key"></i>
                            </el-icon>{{ t('gotoAPI') }}
                          </el-link>
                        </span>
                      </div>
                    </div>
                    <div class="tool-content">
                      <el-form-item :label="t('resultCount')" class="form-item-align">
                        <el-slider
                          v-model="webSearchSettings.google_max_results"
                          :min="1"
                          :max="20"
                          :step="1"
                          @input="autoSaveSettings"
                        />
                      </el-form-item>
                      <el-form-item :label="t('apiKey')" class="form-item-align">
                        <el-input
                          v-model="webSearchSettings.google_api_key"
                          :placeholder="t('apiKeyPlaceholder')"
                          show-password
                          @input="autoSaveSettings"
                          class="full-width-input"
                        />
                      </el-form-item>
                      <el-form-item label="CSE ID" class="form-item-align">
                        <el-input
                          v-model="webSearchSettings.google_cse_id"
                          :placeholder="t('googleCSEIdPlaceholder')"
                          @input="autoSaveSettings"
                          class="full-width-input"
                        />
                      </el-form-item>
                    </div>
                  </div>

                  <!-- Brave 配置块 -->
                  <div class="tool-item" v-show="webSearchSettings.engine === 'brave'">
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon>
                            <i class="fa-solid fa-globe"></i>
                          </el-icon>
                          Brave
                          <el-link
                            type="primary"
                            :underline="false"
                            href="https://brave.com/search/api/"
                            target="_blank"
                          >
                            <el-icon class="mr-1">
                              <i class="fa-solid fa-key"></i>
                            </el-icon>{{ t('gotoAPI') }}
                          </el-link>
                        </span>
                      </div>
                    </div>
                    <div class="tool-content">
                      <el-form-item :label="t('resultCount')" class="form-item-align">
                        <el-slider
                          v-model="webSearchSettings.brave_max_results"
                          :min="1"
                          :max="20"
                          :step="1"
                          @input="autoSaveSettings"
                        />
                      </el-form-item>
                      <el-form-item :label="t('apiKey')" class="form-item-align">
                        <el-input
                          v-model="webSearchSettings.brave_api_key"
                          :placeholder="t('apiKeyPlaceholder')"
                          show-password
                          @input="autoSaveSettings"
                          class="full-width-input"
                        />
                      </el-form-item>
                    </div>
                  </div>

                  <!-- Exa 配置块 -->
                  <div class="tool-item" v-show="webSearchSettings.engine === 'exa'">
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon>
                            <i class="fa-solid fa-globe"></i>
                          </el-icon>
                          Exa
                          <el-link
                            type="primary"
                            :underline="false"
                            href="https://docs.exa.ai/reference/welcome"
                            target="_blank"
                          >
                            <el-icon class="mr-1">
                              <i class="fa-solid fa-key"></i>
                            </el-icon>{{ t('gotoAPI') }}
                          </el-link>
                        </span>
                      </div>
                    </div>
                    <div class="tool-content">
                      <el-form-item :label="t('resultCount')" class="form-item-align">
                        <el-slider
                          v-model="webSearchSettings.exa_max_results"
                          :min="1"
                          :max="20"
                          :step="1"
                          @input="autoSaveSettings"
                        />
                      </el-form-item>
                      <el-form-item :label="t('apiKey')" class="form-item-align">
                        <el-input
                          v-model="webSearchSettings.exa_api_key"
                          :placeholder="t('apiKeyPlaceholder')"
                          show-password
                          @input="autoSaveSettings"
                          class="full-width-input"
                        />
                      </el-form-item>
                    </div>
                  </div>

                  <!-- Serper 配置块 -->
                  <div class="tool-item" v-show="webSearchSettings.engine === 'serper'">
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon>
                            <i class="fa-solid fa-globe"></i>
                          </el-icon>
                          Serper
                          <el-link
                            type="primary"
                            :underline="false"
                            href="https://serper.dev/dashboard"
                            target="_blank"
                          >
                            <el-icon class="mr-1">
                              <i class="fa-solid fa-key"></i>
                            </el-icon>{{ t('gotoAPI') }}
                          </el-link>
                        </span>
                      </div>
                    </div>
                    <div class="tool-content">
                      <el-form-item :label="t('resultCount')" class="form-item-align">
                        <el-slider
                          v-model="webSearchSettings.serper_max_results"
                          :min="1"
                          :max="20"
                          :step="1"
                          @input="autoSaveSettings"
                        />
                      </el-form-item>
                      <el-form-item :label="t('apiKey')" class="form-item-align">
                        <el-input
                          v-model="webSearchSettings.serper_api_key"
                          :placeholder="t('apiKeyPlaceholder')"
                          show-password
                          @input="autoSaveSettings"
                          class="full-width-input"
                        />
                      </el-form-item>
                    </div>
                  </div>
                  <!-- Bochaai 配置块 -->
                  <div class="tool-item" v-show="webSearchSettings.engine === 'bochaai'">
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon>
                            <i class="fa-solid fa-globe"></i>
                          </el-icon>
                          Bochaai
                          <el-link
                            type="primary"
                            :underline="false"
                            href="https://open.bochaai.com/overview"
                            target="_blank"
                          >
                            <el-icon class="mr-1">
                              <i class="fa-solid fa-key"></i>
                            </el-icon>{{ t('gotoAPI') }}
                          </el-link>
                        </span>
                      </div>
                    </div>
                    <div class="tool-content">
                      <el-form-item :label="t('resultCount')" class="form-item-align">
                        <el-slider
                          v-model="webSearchSettings.bochaai_max_results"
                          :min="1"
                          :max="20"
                          :step="1"
                          @input="autoSaveSettings"
                        />
                      </el-form-item>
                      <el-form-item :label="t('apiKey')" class="form-item-align">
                        <el-input
                          v-model="webSearchSettings.bochaai_api_key"
                          :placeholder="t('apiKeyPlaceholder')"
                          show-password
                          @input="autoSaveSettings"
                          class="full-width-input"
                        />
                      </el-form-item>
                    </div>
                  </div>
                  <div class="tool-item" v-show="webSearchSettings.crawler === 'jina'">
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon>
                            <i class="fa-solid fa-globe"></i>
                          </el-icon>
                          jina
                          <el-link
                            type="primary"
                            :underline="false"
                            href="https://jina.ai/api-dashboard" 
                            target="_blank"
                          >
                            <el-icon class="mr-1">
                              <i class="fa-solid fa-key"></i>
                            </el-icon>{{ t('gotoAPI') }}
                          </el-link>
                        </span>
                      </div>
                    </div>
                    <div class="tool-content">
                      <el-form-item :label="t('apiKey')" class="form-item-align">
                        <el-input
                          v-model="webSearchSettings.jina_api_key"
                          :placeholder="t('jinaAPIKeyPlaceholder')"
                          show-password
                          @input="autoSaveSettings"
                          class="full-width-input"
                        />
                      </el-form-item>
                    </div>
                  </div>
                  <div class="tool-item" v-show="webSearchSettings.crawler === 'crawl4ai'">
                    <div class="tool-header">
                      <div class="header-left">
                        <span>
                          <el-icon>
                            <i class="fa-solid fa-globe"></i>
                          </el-icon>
                          Crawl4Ai
                          <el-link
                            type="primary"
                            :underline="false"
                            href="https://github.com/unclecode/crawl4ai" 
                            target="_blank"
                          >
                            <el-icon class="mr-1">
                              <i class="fa-solid fa-key"></i>
                            </el-icon>{{ t('gotoGithub') }}
                          </el-link>
                        </span>
                      </div>
                    </div>
                    <div class="tool-content">
                      <el-form-item :label="t('baseURL')" class="form-item-align">
                        <el-input
                          v-model="webSearchSettings.Crawl4Ai_url"
                          :placeholder="t('crawl4AiURLPlaceholder')"
                          @input="autoSaveSettings"
                          class="full-width-input"
                        />
                      </el-form-item>
                      <el-form-item :label="t('apiKey')" class="form-item-align">
                        <el-input
                          v-model="webSearchSettings.Crawl4Ai_api_key"
                          :placeholder="t('crawl4AiAPIKeyPlaceholder')"
                          show-password
                          @input="autoSaveSettings"
                          class="full-width-input"
                        />
                      </el-form-item>
                    </div>
                  </div>
                </el-form>
              </div>
              <!-- 知识库界面 -->
              <div v-show="subMenu === 'document'" class="page">
                <el-tabs v-model="activeKbTab">
                  <el-tab-pane :label="t('addKnowledgeBase')" name="add">
                  <!-- 磁贴网格 -->
                  <div class="provider-grid">
                    <!-- 知识库磁贴 -->
                    <div class="provider-card knowledge-card" v-for="kb in knowledgeBases" :key="kb.id">
                      <div class="card-header">
                        <!-- 加载状态指示 -->
                        <template v-if="kb.processingStatus === 'processing'">
                          <el-icon class="loading-spinner">
                            <i class="fa-solid fa-spinner"></i>
                          </el-icon>
                        </template>
                        <template v-else>
                          <el-switch v-model="kb.enabled" @change="toggleKbEnabled(kb)"></el-switch>
                        </template>

                        <div class="card-actions">
                          <el-button @click="removeKnowledgeBase(kb)" type="danger"  circle size="small">
                            <i class="fa-solid fa-trash"></i>
                          </el-button>
                        </div>
                      </div>

                      <!-- 内容区域根据状态显示 -->
                      <!-- 修改模板部分 -->
                      <template v-if="kb.processingStatus !== 'processing'">
                        <div class="kb-content">
                          <div class="kb-header">
                            <h3 class="kb-title">{{ kb.name }}</h3>
                            <el-tag v-if="kb.files?.length" type="info" size="small" effect="dark">
                              {{ kb.files.length }} {{ t('files') }}
                            </el-tag>
                          </div>
                          <p class="kb-description">{{ kb.introduction || t('noDescription') }}</p>
                          <div class="kb-meta">
                            <div class="kb-meta-item">
                              <el-icon class="kb-icon">
                                <i class="fa-solid fa-file"></i>
                              </el-icon>
                              <span>{{ t('model') }}: {{ kb.model || t('default') }}</span>
                            </div>
                            <div class="kb-meta-item">
                              <el-icon class="kb-icon">
                                <i class="fa-solid fa-database"></i>
                              </el-icon>
                              <span>{{ t('segment') }}: {{ kb.chunk_size }} / {{ kb.chunk_overlap }}</span>
                            </div>
                          </div>
                        </div>
                      </template>
                      <div v-else class="processing-message">
                        <p>{{ t('knowledgeBaseGenerating') }}</p>
                      </div>
                    </div>
                    <!-- 添加新知识库磁贴 -->
                    <div class="provider-card add-tile" @click="showAddKbDialog = true;currentUploadType = 'file'">
                      <el-icon :size="40" color="#909399">
                        <i class="fa-solid fa-plus"></i>
                      </el-icon>
                      <div style="color: #606266; margin-top: 10px;">{{ t('addNewKnowledgeBase') }}</div>
                    </div>
                  </div>

                  <!-- 添加知识库对话框 -->
                  <el-dialog
                    v-model="showAddKbDialog"
                    :title="t('addNewKnowledgeBase')"
                    width="600px"
                    @closed="() => {
                      newKb = {
                        name: '',
                        introduction: '',
                        providerId: null,
                        model: '',
                        base_url: '',
                        api_key: '',
                        chunk_size: 1024,
                        chunk_overlap: 256,
                        weight: 0.5,
                        chunk_k: 5
                      }
                    }"
                  >
                    <el-form label-position="top" label-width="120px">
                      <el-form-item :label="t('knowledgeBaseName')" required>
                        <el-input v-model="newKb.name" :placeholder="t('enterKnowledgeBaseName')" />
                      </el-form-item>

                      <el-form-item :label="t('knowledgeBaseIntro')">
                        <el-input v-model="newKb.introduction" type="textarea" :placeholder="t('enterKnowledgeBaseIntro')" />
                      </el-form-item>

                      <el-form-item :label="t('embeddingProvider')" required>
                        <el-select
                          v-model="newKb.providerId"
                          :placeholder="t('selectProvider')"
                          filterable
                          @change="selectKbProvider"
                          class="full-width-input"
                        >
                          <el-option
                            v-for="provider in modelProviders"
                            :key="provider.id"
                            :label="provider.vendor+' - '+provider.modelId"
                            :value="provider.id"
                          >
                            <div class="provider-option">
                              <img 
                                :src="getVendorLogo(provider.vendor)" 
                                class="mini-vendor-logo"
                              />
                              <span class="model-id">{{ provider.modelId }}</span>
                            </div>
                          </el-option>
                        </el-select>
                      </el-form-item>
                      <el-alert type="info" :closable="false" class="mb-2">
                        <template #default>
                          <div class="alert-content">
                            {{ t('firstTimeUse') }}
                            <el-link
                              type="primary"
                              :underline="false"
                              class="font-medium"
                              @click="switchToApiBox"
                            >
                              <el-icon class="mr-1">
                                <i class="fa-solid fa-key"></i>
                              </el-icon>{{ t('keyBoxInterface') }}
                            </el-link>
                            {{ t('addProviderReturnSelect') }}
                            {{ t('addemdNotice') }}
                          </div>
                        </template>
                      </el-alert>
                      <el-collapse v-model="activeCollapse" class="advanced-settings">
                        <el-collapse-item name="advanced">
                          <template #title>
                            <div class="collapse-title">
                              <span class="font-medium">{{ t('advancedSettings') }}</span>
                            </div>
                          </template>

                          <el-form-item :label="t('segmentSize')">
                            <el-slider
                              v-model="newKb.chunk_size"
                              :min="512"
                              :max="4096"
                              :step="512"
                              @input="autoSaveSettings"
                            />
                          </el-form-item>
                          <el-form-item :label="t('overlapSize')">
                            <el-slider
                              v-model="newKb.chunk_overlap"
                              :min="128"
                              :max="1024"
                              :step="128"
                              @input="autoSaveSettings"
                            />
                          </el-form-item>
                          <el-form-item :label="t('returnParagraphs')">
                            <el-slider
                              v-model="newKb.chunk_k"
                              :min="1"
                              :max="50"
                              :step="1"
                              @input="autoSaveSettings"
                            />
                          </el-form-item>
                          <el-form-item :label="t('keywordSemanticWeight')">
                            <span style="margin-right: 10px;">{{t('keyword')}}</span>
                            <el-slider
                              v-model="newKb.weight"
                              :min="0"
                              :max="1"
                              :step="0.1"
                              @input="autoSaveSettings"
                              style="flex: 1;"
                            ></el-slider>
                            <span style="margin-left: 10px;">{{t('semantic')}}</span>
                          </el-form-item>
                        </el-collapse-item>
                      </el-collapse>
                    </el-form>
                    <!-- 文件上传区域 -->
                    <el-form-item>
                      <div
                        class="drop-zone"
                        @dragover.prevent
                        @drop.prevent="handleKbDrop"
                        @click="browseKbFiles"
                      >
                        <el-icon :size="50">
                          <i class="fa-solid fa-upload"></i>
                        </el-icon>
                        <p>{{ t('clickOrDrop') }}</p>
                      </div>

                      <!-- 紧凑型文件列表 -->
                      <div class="compact-file-list" v-if="newKbFiles.length">
                        <div
                          v-for="(file, index) in newKbFiles"
                          :key="index"
                          class="compact-file-item"
                        >
                          <span class="file-name">@{{ file.name }}</span>
                          <el-button
                            @click.stop="removeKbFile(index)"
                            class="delete-icon"
                            circle
                          />
                          <i class="fa-solid fa-trash"></i>
                          </el-button>
                        </div>
                      </div>
                    </el-form-item>
                    <template #footer>
                      <el-button @click="showAddKbDialog = false">{{ t('cancel') }}</el-button>
                      <el-button
                        type="primary"
                        @click="createKnowledgeBase"
                        :disabled="!newKb.name || !newKb.providerId"
                      >
                        {{ t('createImmediately') }}
                      </el-button>
                    </template>
                  </el-dialog>
                </el-tab-pane>
                <el-tab-pane :label="t('kbSettings')" name="settings">
                  <el-form :model="KBSettings" class="settings-form"  label-position="top">
                    <div class="tool-item">
                      <div class="tool-header">
                        <div class="header-left">
                          <span>
                            <el-icon>
                              <i class="fa-solid fa-book"></i>
                            </el-icon>
                            {{ t('knowledgeBase') }}
                          </span>
                        </div>
                      </div>
                      <div class="tool-content">
                        <!-- 原有搜索时机设置 -->
                        <el-form-item :label="t('KBSearchTiming')" class="form-item-align">
                          <el-select
                            v-model="KBSettings.when"
                            @change="autoSaveSettings"
                            class="full-width-input"
                          >
                            <el-option :label="t('beforeThinking')" value="before_thinking"></el-option>
                            <el-option :label="t('afterThinking')" value="after_thinking"></el-option>
                            <el-option :label="t('both')" value="both"></el-option>
                          </el-select>
                        </el-form-item>
                        <!-- 新增参数设置 -->
                        <el-form-item :label="t('rerankEnable')" class="form-item-align" label-position="left">
                          <el-switch
                            v-model="KBSettings.is_rerank"
                            @change="autoSaveSettings"
                          ></el-switch>
                        </el-form-item>
                        <el-form-item :label="t('returnChunks')" class="form-item-align">
                          <el-slider
                            v-model="KBSettings.top_n"
                            :min="1"
                            :max="20"
                            :step="1"
                            @input="autoSaveSettings"
                          />
                        </el-form-item>
                        <!-- 模型参数 -->
                        <el-form-item :label="t('rerankProvider')" class="form-item-align">
                          <el-select
                            v-model="KBSettings.selectedProvider"
                            :placeholder="t('selectProvider')"
                            filterable
                            @change="selectRankProvider"
                            @visible-change="handleRankProviderVisibleChange"
                            class="full-width-input"
                          >
                            <el-option
                              v-for="provider in modelProviders"
                              :key="provider.id"
                              :label="provider.vendor+' - '+provider.modelId"
                              :value="provider.id"
                            >
                              <div class="provider-option">
                                <img 
                                  :src="getVendorLogo(provider.vendor)" 
                                  class="mini-vendor-logo"
                                />
                                <span class="model-id">{{ provider.modelId }}</span>
                              </div>
                            </el-option>
                          </el-select>
                        </el-form-item>
                        <el-alert
                          type="info"
                          :closable="false"
                          class="mb-2"
                        >
                          <template #default>
                            <div class="alert-content">
                              {{ t('firstTimeUse') }}
                              <el-link
                                type="primary"
                                :underline="false"
                                class="font-medium"
                                @click="switchToApiBox"
                              >
                                <el-icon class="mr-1">
                                  <i class="fa-solid fa-key"></i>
                                </el-icon>{{ t('keyBoxInterface') }}
                              </el-link>
                              {{ t('addProviderReturnSelect') }}
                              {{ t('rerankmodelnotice') }}
                            </div>
                          </template>
                        </el-alert>
                      </div>
                    </div>
                  </el-form>
                </el-tab-pane>
                </el-tabs>
              </div>

            <!-- 新增表情包界面 -->
              <div v-show="subMenu === 'sticker'" class="page">
                <div class="provider-grid">
                  <!-- 已有表情包库 -->
                  <div 
                    v-for="pack in stickerPacks" 
                    :key="pack.id"
                    class="provider-card knowledge-card">
                    <div class="card-header">
                      <el-switch v-model="pack.enabled"></el-switch>
                      <div class="card-actions">
                        <el-button @click="deleteStickerPack(pack)" type="danger" circle size="small">
                          <i class="fa-solid fa-trash"></i>
                        </el-button>
                      </div>
                    </div>
                    <div class="kb-content">
                      <div class="kb-header">
                        <h3 class="kb-title">{{ pack.name }}</h3>
                        <el-tag v-if="pack.stickers?.length" type="info" size="small" effect="dark">
                          {{ pack.stickers.length }} {{ t('images') }}
                        </el-tag>
                      </div>
                      <div class="kb-meta">
                        <img :src="pack.cover" class="cover-image" />
                      </div>
                    </div>
                  </div>

                  <!-- 添加新表情包库 -->
                  <div class="provider-card add-tile" @click="showStickerDialog = true">
                    <el-icon :size="40" color="#909399">
                      <i class="fa-solid fa-plus"></i>
                    </el-icon>
                    <div style="color: #606266; margin-top: 10px;">{{ t('addStickerPack') }}</div>
                  </div>
                </div>

                <!-- 表情包创建对话框 -->
                <el-dialog
                  v-model="showStickerDialog"
                  :title="t('createStickerPack')"
                  width="60%">
                  <el-form label-position="top">
                    <el-form-item :label="t('packName')" required>
                      <el-input v-model="newStickerPack.name" />
                    </el-form-item>

                    <el-form-item :label="t('uploadStickers')" required>
                      <div class="sticker-upload">
                        <el-upload
                          multiple
                          list-type="picture-card"
                          :file-list="uploadedStickers"
                          :before-upload="handleBeforeUpload"
                          :on-remove="handleStickerRemove"
                          :on-preview="handlePictureCardPreview"
                        >
                          <el-icon><i class="fa-solid fa-plus"></i></el-icon>
                        </el-upload>
                      </div>
                    </el-form-item>

                    <!-- 预览弹窗 -->
                    <el-dialog v-model="dialogVisible">
                      <img :src="imageUrl" style="width: 100%" alt="Preview">
                    </el-dialog>

                    <el-form-item :label="t('imageDescription')" required>
                      <div class="tag-editor">
                        <div class="tag-item" 
                            v-for="(sticker, index) in uploadedStickers" 
                            :key="index">
                          <img :src="sticker.url" class="sticker-thumb" />
                          <el-input
                            type="textarea"
                            :rows="2"
                            v-model="sticker.description"
                            :placeholder="t('enterDescriptionPlaceholder')"
                          />
                        </div>
                      </div>
                    </el-form-item>
                  </el-form>

                  <template #footer>
                    <el-button @click="cancelStickerUpload">{{ t('cancel') }}</el-button>
                    <el-button 
                      type="primary"
                      @click="createStickerPack"
                      :disabled="!newStickerPack.name || uploadedStickers.length === 0"
                      >
                      {{ t('createImmediately') }}
                    </el-button>
                  </template>
                </el-dialog>
              </div>
              <!--记忆-->
              <div v-show="subMenu === 'memory'" class="page">
                <el-tabs v-model="activeMemoryTab">
                  <!-- 添加新记忆标签页 -->
                  <el-tab-pane :label="t('addNewMemory')" name="add">
                    <div class="provider-grid">
                      <!-- 已有记忆磁贴 -->
                      <div class="provider-card knowledge-card" v-for="memory in memories" :key="memory.id">
                        <div class="card-header">
                          <img 
                            :src="memory.vendor? getVendorLogo(memory.vendor) : 'source/providers/custom.png'" 
                            class="mini-vendor-logo"
                          />
                          <div class="card-actions">
                            <el-button
                              @click="downloadMemory(memory)"
                              type="primary"
                              circle
                              size="small"
                            >
                              <i class="fa-solid fa-download"></i>
                            </el-button>
                            <el-button
                              @click="editMemory(memory.id)"
                              type="default"
                              circle
                              size="small"
                            >
                              <i class="fa-solid fa-pen-to-square"></i>
                            </el-button>
                            <el-button
                              @click="removeMemory(memory.id)"
                              type="danger"
                              circle
                              size="small"
                            >
                              <i class="fa-solid fa-trash"></i>
                            </el-button>
                          </div>
                        </div>
                        <div class="kb-content">
                          <h3 class="kb-title">{{memory.name }}</h3>
                          <div class="kb-meta">
                            <div class="kb-meta-item">
                              <el-icon class="kb-icon">
                                <i class="fa-solid fa-brain"></i>
                              </el-icon>
                              <span>{{ getVendorName(memory.providerId) }}</span>
                            </div>
                          </div>
                        </div>
                      </div>
                      
                      <!-- 添加新记忆磁贴 -->
                      <div class="provider-card add-tile" @click="showAddMemoryDialog = true">
                        <el-icon :size="40" color="#909399"><i class="fa-solid fa-plus"></i></el-icon>
                        <div style="color: #606266; margin-top: 10px;">{{ t('addNewMemory') }}</div>
                      </div>
                    </div>
                  </el-tab-pane>
                  <!-- 记忆配置标签页 -->
                  <el-tab-pane :label="t('memoryConfig')" name="config">
                    <el-form :model="memorySettings" class="settings-form"  label-position="top">
                      <div class="tool-item">
                        <div class="tool-header">
                          <div class="header-left">
                            <span>
                              <el-icon>
                                <i class="fa-solid fa-brain"></i>
                              </el-icon>
                              {{ t('memory') }}
                            </span>
                          </div>
                        </div>
                        <div class="tool-content">
                          <el-form-item :label="t('memoryEnable')" class="form-item-align" label-position="left">
                            <el-switch
                              v-model="memorySettings.is_memory"
                              @change="autoSaveSettings"
                            ></el-switch>
                          </el-form-item>
                          <el-form-item :label="t('resultCount')" class="form-item-align">
                            <el-slider
                              v-model="memorySettings.memoryLimit"
                              :min="1"
                              :max="20"
                              :step="1"
                              @input="autoSaveSettings"
                            />
                          </el-form-item>
                          <el-form-item :label="t('selectMemory')">
                            <el-select 
                              v-model="memorySettings.selectedMemory" 
                              :placeholder="t('selectMemoryPlaceholder')"
                              class="full-width-input">
                              <el-option
                                v-for="memory in memories"
                                :key="memory.id"
                                :label="memory.name"
                                :value="memory.id"
                              />
                            </el-select>
                          </el-form-item>
                        </div>
                      </div>
                    </el-form>
                  </el-tab-pane>
                </el-tabs>
                <!-- 添加记忆对话框 -->
                <el-dialog v-model="showAddMemoryDialog" :title="t('memoryConfig')" width="80%">
                  <el-form label-position="top">
                    <el-form-item :label="t('memoryName')" required>
                      <el-input v-model="newMemory.name" />
                    </el-form-item>
                    
                    <!-- 新增已有记忆选择框 -->
                    <el-form-item :label="t('selectExistingMemory')">
                      <el-select 
                        v-model="selectedExistingMemoryId" 
                        :placeholder="t('selectExistingMemoryPlaceholder')"
                        @change="copyExistingMemoryData"
                        class="full-width-input">
                        <!-- 添加“无”选项，默认选中 -->
                        <el-option
                          :key="'none'"
                          :label="t('none')"
                          :value="null">
                        </el-option>
                        
                        <el-option
                          v-for="memory in memories"
                          :key="memory.id"
                          :label="memory.name"
                          :value="memory.id">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <div class="upload-container">
                      <div
                        class="drop-zone"
                        @dragover.prevent
                        @drop.prevent="handleJsonDrop"
                        @click="browseJsonFile"
                      >
                        <el-icon :size="50"><i class="fa-solid fa-upload"></i></el-icon>
                        <p>{{ t('clickOrDropJson') }}</p>
                      </div>
                    </div>
                    <el-tabs type="border-card"  v-model="activeMemoryTabName">
                      <!-- 自动更新设定选项卡 -->
                      <el-tab-pane name="autoUpdateSetting">
                        <template #label>
                          <el-tooltip :content="t('autoUpdateNote')" placement="top">
                            <span>{{ t('autoUpdateSetting') }}</span>
                          </el-tooltip>
                        </template>
                        <el-form-item :label="t('embeddingProvider')">
                          <el-select 
                            v-model="newMemory.providerId" 
                            :placeholder="t('selectProvider')"
                            @change="selectMemoryProvider"
                            class="full-width-input">
                            <!-- 添加“无”选项，默认选中 -->
                            <el-option
                              :key="'none'"
                              :label="t('none')"
                              :value="null"
                            >
                              <div class="provider-option">
                                <img 
                                  src="source/providers/custom.png" 
                                  class="mini-vendor-logo"
                                />
                                <span class="model-id">{{ t("NoLongTermMemory") }}</span>
                              </div>
                            </el-option>
                            <el-option
                              v-for="provider in modelProviders"
                              :key="provider.id"
                              :label="provider.vendor+' - '+provider.modelId"
                              :value="provider.id"
                            >
                              <div class="provider-option">
                                <img 
                                  :src="getVendorLogo(provider.vendor)" 
                                  class="mini-vendor-logo"
                                />
                                <span class="model-id">{{ provider.modelId }}</span>
                              </div>
                            </el-option>
                          </el-select>
                        </el-form-item>
                        <el-alert type="info" :closable="false" class="mb-2">
                          <template #default>
                            <div class="alert-content">
                              {{ t('firstTimeUse') }}
                              <el-link
                                type="primary"
                                :underline="false"
                                class="font-medium"
                                @click="switchToApiBox"
                              >
                                <el-icon class="mr-1">
                                  <i class="fa-solid fa-key"></i>
                                </el-icon>{{ t('keyBoxInterface') }}
                              </el-link>
                              {{ t('addProviderReturnSelect') }}
                              {{ t('addemdNotice') }}
                              {{ t('autoUpdateSettingNote') }}
                            </div>
                          </template>
                        </el-alert>
                      </el-tab-pane>

                      <!-- 角色设定选项卡 -->
                      <el-tab-pane name="basicCharacter">
                        <template #label>
                          <el-tooltip :content="t('basicCharacterNote')" placement="top">
                            <span>{{ t('basicCharacter') }}</span>
                          </el-tooltip>
                        </template>
                        <el-form-item>
                          <el-input 
                            v-model="newMemory.basic_character" 
                            :placeholder="t('inputBasicCharacter')"
                            type="textarea"  
                            :rows="4"
                            @input="autoSaveSettings"
                          />
                        </el-form-item>
                      </el-tab-pane>

                      <!-- 世界观设定选项卡 -->
                      <el-tab-pane name="worldviewSetting">
                        <template #label>
                          <el-tooltip :content="t('worldviewSettingNote')" placement="top">
                            <span>{{ t('worldviewSetting') }}</span>
                          </el-tooltip>
                        </template>
                        <div class="memo-extra-params">
                          <div v-for="(param, index) in newMemory.lorebook" :key="index" class="param-row">
                            <el-input
                              v-model="param.name"
                              :placeholder="t('settingName')"
                              class="param-name-input"
                              @input="autoSaveSettings"
                            ></el-input>
                            <el-input
                              v-model="param.value"
                              :placeholder="t('settingValue')"
                              type="textarea"
                              :rows="3"
                              @input="autoSaveSettings"
                              class="param-value-input"
                            ></el-input>
                            <div class="action-row">
                              <el-button
                                @click.stop="clearParam(index)"
                                type="default"
                                size="small"
                                circle
                              >
                                <i class="fa-solid fa-eraser"></i>
                              </el-button>
                              <!-- 第一个条目不显示删除按钮 -->
                              <el-button
                                v-if="index !== 0"
                                @click.stop="removeLorebook(index)"
                                type="danger"
                                size="small"
                                circle
                              >
                                <i class="fa-solid fa-trash"></i>
                              </el-button>
                              <el-button 
                                @click="addLorebook"
                                type="primary"
                                circle
                                size="small"
                                class="header-add-btn"
                              >
                                <i class="fa-solid fa-plus"></i>
                              </el-button>
                            </div>
                          </div>
                        </div>
                      </el-tab-pane>

                      <!-- 随机设定选项卡 -->
                      <el-tab-pane name="randomSetting">
                        <template #label>
                          <el-tooltip :content="t('randomSettingNote')" placement="top">
                            <span>{{ t('randomSetting') }}</span>
                          </el-tooltip>
                        </template>
                        <div class="memo-extra-params">
                          <div v-for="(param, index) in newMemory.random" :key="index" class="param-row">
                            <el-input
                              v-model="param.value"
                              :placeholder="t('settingValue')"
                              type="textarea"
                              :rows="3"
                              @input="autoSaveSettings"
                              class="param-value-input"
                            ></el-input>
                            <div class="action-row">
                              <el-button
                                @click.stop="clearRandom(index)"
                                type="default"
                                size="small"
                                circle
                              >
                                <i class="fa-solid fa-eraser"></i>
                              </el-button>
                              <!-- 第一个条目不显示删除按钮 -->
                              <el-button
                                v-if="index !== 0"
                                @click.stop="removeRandom(index)"
                                type="danger"
                                size="small"
                                circle
                              >
                                <i class="fa-solid fa-trash"></i>
                              </el-button>
                              <el-button 
                                @click="addRandom"
                                type="primary"
                                circle
                                size="small"
                                class="header-add-btn"
                              >
                                <i class="fa-solid fa-plus"></i>
                              </el-button>
                            </div>
                          </div>
                        </div>
                      </el-tab-pane>
                    </el-tabs>
                  </el-form>

                  <template #footer>
                    <el-button @click="showAddMemoryDialog = false">{{ t('cancel') }}</el-button>
                    <el-button 
                      type="primary" 
                      @click="addMemory"
                      :disabled="!newMemory.name">
                      {{ t('confirmAdd') }}
                    </el-button>
                  </template>
                </el-dialog>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 系统设置页面 -->
        <div v-show="activeMenu === 'system'" class="page tools-container">
          <el-form :model="systemSettings" class="settings-form" label-position="top">
            <div class="tool-item">
              <div class="tool-header">
                <span>
                  <el-icon>
                    <i class="fa-solid fa-language"></i>
                  </el-icon>
                  {{ t('systemLanguage') }}
                </span>
              </div>
              <div class="tool-content">
                <el-form-item class="form-item-align">
                  <el-select
                    v-model="systemSettings.language"
                    @change="handleSystemLanguageChange"
                    class="full-width-input">
                    <el-option
                      v-for="option in systemlanguageOptions"
                      :key="option.value"
                      :label="option.label"
                      :value="option.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </div>

            <div class="tool-item">
              <div class="tool-header">
                <span>
                  <el-icon>
                    <i class="fa-solid fa-brush"></i>
                  </el-icon>
                  {{ t('themeSettings') }}
                </span>
              </div>
              <div class="tool-content">
                <el-form-item class="form-item-align">
                  <el-select
                    v-model="systemSettings.theme"
                    @change="handleThemeChange"
                    class="full-width-input">
                    <el-option
                      v-for="option in themeOptions"
                      :key="option.value"
                      :label="option.label"
                      :value="option.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </div>
            
            <div class="tool-item" v-if="isElectron">
              <div class="tool-header">
                <span>
                  <el-icon>
                    <i class="fa-solid fa-network-wired"></i>
                  </el-icon>
                  {{ t('networkSettings') }}
                </span>
              </div>
              <div class="tool-content">
                <el-form-item class="form-item-align">
                  <el-select
                    v-model="systemSettings.network"
                    @change="handleNetworkChange"
                    class="full-width-input">
                    <el-option
                      v-for="option in networkOptions"
                      :key="option.value"
                      :label="t(option.label)"
                      :value="option.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </div>

            <div class="tool-item">
              <div class="tool-header">
                <span>
                  <el-icon>
                    <i class="fa-solid fa-wifi"></i>
                  </el-icon>
                  {{ t('proxySettings') }}
                </span>
              </div>
              <div class="tool-content">
                <el-form-item class="form-item-align">
                  <el-input
                    v-model="systemSettings.proxy"
                    :placeholder="t('proxyPlaceholder')"
                    class="full-width-input"
                    @input="updateProxy"
                  ></el-input>
                </el-form-item>
              </div>
            </div>
            <div class="browser-mode-btn-container" v-show="isElectron">
              <el-button
                class="browser-mode-btn"
                type="primary"
                @click="openUserfile"
                round
                size="large">
                <span class="ml-2">
                  {{ t('openUserfile') }}
                </span>
              </el-button>
            </div>
          </el-form>
          <!--eldialog 询问用户是否立即重启-->
          <el-dialog
            :title="t('restartConfirm')"
            v-model="showRestartDialog"
            width="600px">
            <span>{{ t('restartConfirmText') }}</span>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="showRestartDialog = false">{{ t('cancel') }}</el-button>
                <el-button type="primary" @click="restartApp">{{ t('confirmRestart') }}</el-button>
              </span>
            </template>
          </el-dialog>
        </div>

        <div v-show="activeMenu === 'agent_group'" class="page agent-suite-container">
          <div class="suite-layout">
            <!-- 左侧导航 -->
            <div class="suite-sidebar">
              <div class="tile-nav">
                <div 
                  v-for="tile in agentTiles" 
                  :key="tile.id"
                  class="nav-item"
                  :class="{ active: subMenu === tile.id }"
                  @click="subMenu = tile.id">
                  <el-icon class="nav-icon"><i :class="tile.icon"></i></el-icon>
                  <span class="nav-text">{{ t(tile.title) }}</span>
                </div>
              </div>
            </div>
            <!-- 内容切换区 -->
            <div class="suite-content">
              <!-- 在agent_group的内容区添加ComfyUI配置 -->
              <div v-show="subMenu === 'comfyui'" class="page comfyui-container">
                <el-tabs>
                  <!-- 配置选项卡 -->
                  <el-tab-pane :label="t('comfyuiConfig')">
                    <el-form class="settings-form" label-position="top">
                      <div class="tool-item">
                        <div class="tool-header" style="display: flex; justify-content: space-between; align-items: center;">
                          <span>
                            <el-icon><i class="fa-solid fa-server"></i></el-icon>
                            {{ t('comfyuiServers') }}
                            <el-link
                              type="primary"
                              :underline="false"
                              href="https://platform.comfy.org/profile/api-keys" 
                              target="_blank"
                            >
                              <el-icon class="mr-1">
                                <i class="fa-solid fa-key"></i>
                              </el-icon>{{ t('gotoAPI') }}
                            </el-link>
                          </span>
                        </div>
                        <div class="tool-content">
                          <div class="server-item">
                            <el-input 
                              v-model="comfyuiAPIkey" 
                              :placeholder="t('comfyuiAPIKey')"
                              class="full-width-input"
                              show-password
                              @change="autoSaveSettings"
                            >
                            </el-input>
                          </div>
                          <div v-for="(server, index) in comfyuiServers" 
                              :key="index" 
                              class="server-item">
                            <el-input 
                              v-model="comfyuiServers[index]" 
                              placeholder="http://localhost:8188"
                              class="full-width-input"
                              @change="autoSaveSettings"
                            >
                            </el-input>
                            <el-tooltip :content="t('connectComfyUIServer')" placement="top">
                              <el-button 
                                type="primary" 
                                @click="connectComfyUI(index)" 
                                :disabled="comfyuiServers.length === 0 || isConnecting"
                                circle
                              >
                                <template v-if="isConnecting">
                                  <i class="fa-solid fa-spinner fa-spin"></i>
                                </template>
                                <template v-else>
                                  <i class="fa-solid fa-plug"></i>
                                </template>
                              </el-button>
                            </el-tooltip>
                            <el-tooltip :content="t('removeComfyUIServer')" placement="top">
                              <el-button 
                                v-if="index !== 0"
                                @click="removeComfyUIServer(index)"
                                type="danger" 
                                circle>
                                <i class="fa-solid fa-trash"></i>
                              </el-button>
                            </el-tooltip>
                          </div>
                          <el-button 
                            @click="addComfyUIServer"
                            type="primary" 
                            plain 
                            class="add-server-btn">
                            <i class="fa-solid fa-plus"></i> {{ t('addServer') }}
                          </el-button>
                        </div>
                      </div>
                      <el-alert
                          :title="t('comfyuiConfigInfo')"
                          type="info"
                          :closable="false"
                          class="mb-2"
                        >
                          1. {{ t('comfyuiConfigInfo1') }}<br>
                          2. {{ t('comfyuiConfigInfo2') }}<br>
                          3. {{ t('comfyuiConfigInfo3') }}<br>
                          4. {{ t('comfyuiConfigInfo4') }}<br>
                      </el-alert>
                    </el-form>
                  </el-tab-pane>

                  <!-- 展示选项卡 -->
                  <el-tab-pane :label="t('comfyuiDisplay')">
                    <div class="comfyui-iframe-container">
                      <iframe 
                        v-if="activeComfyUIUrl"
                        :src="activeComfyUIUrl" 
                        frameborder="0"
                        class="comfyui-iframe"></iframe>
                      <div v-else class="no-server-tip">
                        <el-empty :description="t('noServerTip')" />
                      </div>
                    </div>
                  </el-tab-pane>

                      <!-- 新增 ComfyUI 工作流转工具选项卡 -->
                  <el-tab-pane :label="t('comfyuiWorkflowTool')">
                  <!-- 磁贴列表 -->
                    <div class="provider-grid">
                      <div v-for="file in workflows" :key="file.unique_filename" class="provider-card knowledge-card">
                        <div class="card-header">
                          <el-switch v-model="file.enabled" @change="autoSaveSettings"></el-switch>
                          <div class="card-actions">
                            <!-- 下载按钮 -->
                            <a :href="`${partyURL}/uploaded_files/${file.unique_filename}`" download target="_blank">
                              <el-button circle size="small" class="file-actions-btn">
                                  <i class="fa-solid fa-download"></i>
                              </el-button>
                            </a>
                            <!-- 删除按钮 -->
                            <el-button
                              type="danger"
                              circle
                              size="small"
                              @click="deleteWorkflow(file.unique_filename)">
                              <i class="fa-solid fa-trash"></i>
                            </el-button>
                          </div>
                        </div>
                        <h3>{{ file.original_filename }}</h3>
                        <span>{{ file.description }}</span>
                      </div>
                      <!-- 添加上传按钮 -->
                      <div class="provider-card add-tile" @click="showWorkflowUploadDialog = true">
                        <el-icon :size="40" color="#909399"><i class="fa-solid fa-plus"></i></el-icon>
                        <div style="color: #606266; margin-top: 10px;">{{ t('uploadWorkflowJson') }}</div>
                      </div>
                    </div>
                  </el-tab-pane>
                </el-tabs>
                <!-- 工作流上传对话框 -->
                <el-dialog
                  v-model="showWorkflowUploadDialog"
                  :title="t('uploadWorkflowJson')"
                  width="600px"
                >
                  <div class="upload-container">
                    <div
                      class="drop-zone"
                      @dragover.prevent
                      @drop.prevent="handleWorkflowDrop"
                      @click="browseWorkflowFile"
                    >
                      <el-icon :size="50"><i class="fa-solid fa-upload"></i></el-icon>
                      <p>{{ t('clickOrDrop') }}</p>
                    </div>
                    
                    <!-- 文件列表 -->
                    <div class="compact-file-list" v-if="workflowFile">
                      <div class="compact-file-item">
                        <span class="file-name">@{{ workflowFile.name }}</span>
                        <el-button
                          @click.stop="removeWorkflowFile"
                          class="delete-icon"
                          circle
                        >
                          <i class="fa-solid fa-trash"></i>
                        </el-button>
                      </div>
                    </div>

                    <div class="input-box" required>
                      <el-input
                        v-model="workflowDescription"
                        type="textarea"
                        :rows="3"
                        :placeholder="t('descriptionPlaceholder')"
                      />
                    </div>

                    <div class="input-box">
                      <!-- 文字输入位置选择 -->
                      <el-select v-model="selectedTextInput" value-key="id"  :placeholder="t('selectTextInput')" class="full-width-input">
                        <el-option
                          v-for="(node, index) in textInputOptions"
                          :key="index"
                          :label="node.label"
                          :value="node.value"
                        ></el-option>
                      </el-select>
                    </div>
                    <div class="input-box">
                      <!-- 文字输入位置选择 -->
                      <el-select v-model="selectedTextInput2" value-key="id"  :placeholder="t('selectTextInput')" class="full-width-input">
                        <el-option
                          v-for="(node, index) in textInputOptions"
                          :key="index"
                          :label="node.label"
                          :value="node.value"
                        ></el-option>
                      </el-select>
                    </div>
                    <div class="input-box">
                      <!-- 图片输入位置选择 -->
                      <el-select v-model="selectedImageInput" value-key="id" :placeholder="t('selectImageInput')" class="full-width-input">
                        <el-option
                          v-for="(node, index) in imageInputOptions"
                          :key="index"
                          :label="node.label"
                          :value="node.value"
                        ></el-option>
                      </el-select>
                    </div>
                    <div class="input-box">
                      <!-- 图片输入位置选择 -->
                      <el-select v-model="selectedImageInput2" value-key="id" :placeholder="t('selectImageInput')" class="full-width-input">
                        <el-option
                          v-for="(node, index) in imageInputOptions"
                          :key="index"
                          :label="node.label"
                          :value="node.value"
                        ></el-option>
                      </el-select>
                    </div>
                    <div class="input-box">
                      <!-- 种子位置选择 -->
                      <el-select v-model="selectedSeedInput" value-key="id" :placeholder="t('selectSeedInput')" class="full-width-input">
                        <el-option
                          v-for="(node, index) in seedInputOptions"
                          :key="index"
                          :label="node.label"
                          :value="node.value"
                        ></el-option>
                      </el-select>
                    </div>
                    <div class="input-box">
                      <!-- 种子位置选择 -->
                      <el-select v-model="selectedSeedInput2" value-key="id" :placeholder="t('selectSeedInput')" class="full-width-input">
                        <el-option
                          v-for="(node, index) in seedInputOptions"
                          :key="index"
                          :label="node.label"
                          :value="node.value"
                        ></el-option>
                      </el-select>
                    </div>
                    <el-alert
                        type="info"
                        :closable="false"
                        class="mb-2"
                      >
                        {{ t('comfyuiWorkflowInfo') }}
                    </el-alert>
                  </div>
                  <template #footer>
                    <el-button @click="cancelWorkflowUpload">{{ t('cancel') }}</el-button>
                    <el-button type="primary" @click="uploadWorkflow" :disabled="!workflowFile">
                      {{ t('createImmediately') }}
                    </el-button>
                  </template>
                </el-dialog>
              </div>
              <!-- 智能体页面 -->
              <div v-show="subMenu === 'agents'" class="page agents-container">
                <!-- 磁贴网格 -->
                <div class="provider-grid">
                  <!-- 已有智能体 -->
                  <div class="provider-card agent-card" v-for="agent in agents" :key="agent.id">
                    <div class="card-header">
                      <el-switch v-model="agent.enabled" @change="autoSaveSettings"></el-switch>
                      <div class="card-actions">
                        <!-- 更新删除按钮样式 -->
                        <el-button @click="removeAgent(agent.id)" type="danger" circle size="small">
                          <i class="fa-solid fa-trash"></i>
                        </el-button>
                      </div>
                    </div>
                    
                    <div class="agent-content">
                      <div class="agent-header">
                        <span class="agent-name">{{ agent.name }}</span>
                        <!-- 添加复制功能 -->
                        <el-button
                          size="small"
                          type="info"
                          @click="copyAgentName(agent.name)"
                        >
                          <i class="fa-regular fa-copy"></i>
                        </el-button>
                      </div>
                      <!-- 带复制功能的ID展示 -->
                      <el-tag 
                        type="info" 
                        size="small" 
                        class="agent-id clickable"
                        @click="copyAgentId(agent.id)"
                      >
                        {{ agent.id }}
                        <i class="fa-regular fa-copy"></i>
                      </el-tag>
                      <p class="agent-prompt">{{ agent.system_prompt }}</p>
                    </div>
                  </div>
                  <!-- 添加新智能体 -->
                  <div class="provider-card add-tile" @click="showAgentForm = true;newAgent.system_prompt = this.system_prompt">
                    <el-icon :size="40" color="#909399"><i class="fa-solid fa-plus"></i></el-icon>
                    <div style="color: #606266; margin-top: 10px;">{{ t('addNewAgent') }}</div>
                  </div>
                </div>
                <!-- 智能体编辑对话框 -->
                <el-dialog v-model="showAgentForm" :title="editingAgent ? t('editAgent') : t('addAgent')" width="600px">
                  <el-form label-position="top">
                    <el-form-item :label="t('agentName')" required>
                      <el-input v-model="newAgent.name" :placeholder="t('agentNamePlaceholder')"/>
                    </el-form-item>
                    <el-form-item :label="t('systemPrompt')" required>
                      <el-input 
                        v-model="newAgent.system_prompt" 
                        type="textarea" 
                        :rows="6"
                        :placeholder="t('systemPromptPlaceholder')"/>
                    </el-form-item>
                      <!-- 新增标签页 -->
                      <el-tabs v-model="agentTabActive" type="border-card">
                        <!-- 知识库 -->
                        <el-tab-pane :label="t('knowledgeBase')" name="knowledge">
                          <div class="knowledge-dialog-content">
                            <div v-for="kb in knowledgeBases" :key="kb.id" class="knowledge-item">
                              <el-switch v-model="kb.enabled" @change="autoSaveSettings"></el-switch>
                              <div class="knowledge-info">
                                <div class="knowledge-name">{{ kb.name }}</div>
                                <div class="knowledge-desc">{{ kb.introduction || t('noDescription') }}</div>
                              </div>
                            </div>
                            <div v-if="knowledgeBases.length === 0" class="empty-tip">
                              {{ t('noKnowledgeBase') }}
                              <a href="#" @click.stop.prevent="switchToKnowledgePage">{{ t('goToKnowledgeBase') }}</a>
                              {{ t('add') }}
                            </div>
                          </div>
                        </el-tab-pane>
                        <!-- MCP服务器 -->
                        <el-tab-pane :label="t('mcpServers')" name="mcp">
                          <div class="knowledge-dialog-content">
                            <!-- 服务器列表 -->
                            <div v-for="(server, name) in mcpServers" :key="name" class="knowledge-item">
                              <el-switch 
                                :active-value="false"  
                                :inactive-value="true" 
                                v-model="server.disabled" 
                                @change="autoSaveSettings">
                              </el-switch>
                              <div class="knowledge-info">
                                <div class="knowledge-name">{{ name }}</div>
                              </div>
                            </div>
                            <div v-if="Object.keys(mcpServers).length === 0" class="empty-tip">
                              {{ t('nomcpServers') }}
                              <a href="#" @click.stop.prevent="switchTomcpServers">{{ t('goTomcpServers') }}</a>
                              {{ t('add') }}
                            </div>
                          </div>
                        </el-tab-pane>
                        <!-- A2A服务器 -->
                        <el-tab-pane :label="t('a2aServers')" name="a2a">
                          <div class="knowledge-dialog-content">
                            <div v-for="(server, url) in a2aServers" :key="url" class="knowledge-item">
                              <el-switch v-model="server.enabled" @change="autoSaveSettings"></el-switch>
                              <div class="knowledge-info">
                                <div class="knowledge-name">{{ server.name }}</div>
                                <div class="knowledge-desc">{{ server.description }}</div>
                              </div>
                            </div>
                            <div v-if="Object.keys(a2aServers).length === 0" class="empty-tip">
                              {{ t('noA2AServers') }}
                              <a href="#" @click.stop.prevent="switchToa2aServers">{{ t('addA2AServer') }}</a>
                              {{ t('add') }}
                            </div>
                          </div>
                        </el-tab-pane>
                        <!-- 工具 -->
                        <el-tab-pane :label="t('tools')" name="tools">
                          <div class="knowledge-dialog-content">
                            <div class="knowledge-item">
                              <el-switch v-model="webSearchSettings.enabled" @change="autoSaveSettings"></el-switch>
                              <div class="knowledge-info">
                                <div class="knowledge-name">{{ t('webSearch') }}</div>
                              </div>
                            </div>
                            <div class="knowledge-item">
                              <el-switch v-model="reasonerSettings.enabled" @change="autoSaveSettings"></el-switch>
                              <div class="knowledge-info">
                                <div class="knowledge-name">{{ t('deepThinking') }}</div>
                              </div>
                            </div>
                            <div class="knowledge-item">
                              <el-switch v-model="toolsSettings.deepsearch.enabled" @change="autoSaveSettings"></el-switch>
                              <div class="knowledge-info">
                                <div class="knowledge-name">{{ t('deepResearch') }}</div>
                              </div>
                            </div>
                          </div>
                        </el-tab-pane>
                      </el-tabs>
                  </el-form>
                  <el-alert
                    type="info"
                    :closable="false"
                    class="mb-2"
                  >
                    <template #default>
                      <div class="alert-content">
                        {{ t('agentInfo') }}
                      </div>
                    </template>
                  </el-alert>
                  <template #footer>
                    <el-button @click="showAgentForm = false">{{ t('cancel') }}</el-button>
                    <el-button 
                      type="primary" 
                      @click="saveAgent"
                      :disabled="!newAgent.name || !newAgent.system_prompt">
                      {{ t('createAgent') }}
                    </el-button>
                  </template>
                </el-dialog>
              </div>
              <!-- A2A页面 -->
              <div v-show="subMenu === 'a2a'" class="page a2a-container">
                <div class="provider-grid">
                  <div class="provider-card a2a-card" v-for="(server, url) in a2aServers" :key="url">
                    <div class="card-header">
                      <template v-if="server.status === 'initializing'">
                        <el-icon class="loading-spinner">
                          <i class="fa-solid fa-spinner"></i>
                        </el-icon>
                      </template>
                      <template v-else>
                        <el-switch v-model="server.enabled" @change="autoSaveSettings"></el-switch>
                      </template>
                      <div class="card-actions">
                        <el-button @click="removeA2AServer(url)" type="danger" circle size="small">
                          <i class="fa-solid fa-trash"></i>
                        </el-button>
                      </div>
                    </div>
                    <div class="a2a-content">
                      <h3 class="a2a-name">{{ server.name }}</h3>
                      <p class="a2a-description">{{ server.description }}</p>
                      <div class="a2a-skills">
                        <el-tag v-for="(skill, index) in server.skills" :key="index" type="info" size="small">
                          {{ skill }}
                        </el-tag>
                      </div>
                    </div>
                  </div>
                  <div class="provider-card add-tile" @click="showAddA2ADialog = true">
                    <el-icon :size="40" color="#909399"><i class="fa-solid fa-plus"></i></el-icon>
                    <div style="color: #606266; margin-top: 10px;">{{ t('addA2AServer') }}</div>
                  </div>
                </div>
            
                <!-- 添加A2A服务器对话框 -->
                <el-dialog v-model="showAddA2ADialog" :title="t('addA2AServer')" width="500px" label-position="top">
                  <el-form label-position="top">
                    <el-form-item :label="t('A2AUrl')" required>
                      <el-input v-model="newA2AUrl" placeholder="http://127.0.0.1:5000"></el-input>
                    </el-form-item>
                  </el-form>
                  <template #footer>
                    <el-button @click="showAddA2ADialog = false">{{ t('cancel') }}</el-button>
                    <el-button 
                      type="primary" 
                      @click="addA2AServer"
                      :disabled="!isValidUrl(newA2AUrl)">
                      {{ t('confirmAdd') }}
                    </el-button>
                  </template>
                </el-dialog>
              </div>
              <!-- MCP页面 -->
              <div v-show="subMenu === 'mcp'" class="page mcp-container">
                <!-- 磁贴网格 -->
                <div class="provider-grid">
                  <div class="provider-card knowledge-card" v-for="(server, name) in mcpServers" :key="name">
                    <div class="card-header">
                      <!-- 加载状态指示 -->
                      <template v-if="server.processingStatus === 'initializing'">
                        <el-icon class="loading-spinner">
                          <i class="fa-solid fa-spinner"></i>
                        </el-icon>
                      </template>
                      <template v-else>
                        <el-switch
                          :active-value="false"  
                          :inactive-value="true" 
                          v-model="server.disabled"
                          @change="autoSaveSettings"
                          class="kb-switch"
                          :disabled="server.processingStatus === 'server_error'"
                        ></el-switch>
                      </template>
                      <div class="card-actions">
                        <el-button
                          @click="editMCPServer(name)"
                          type="default"
                          circle
                          size="small"
                        >
                          <i class="fa-solid fa-pen-to-square"></i>
                        </el-button>
                        <el-button
                          @click="removeMCPServer(name)"
                          type="danger"
                          circle
                          size="small"
                        >
                          <i class="fa-solid fa-trash"></i>
                        </el-button>
                      </div>
                    </div>
                    <div class="kb-content">
                      <div class="kb-header">
                        <h3 class="kb-title">{{ name }}</h3>
                      </div>
                    </div>
                  </div>
            
                  <!-- 添加新磁贴 -->
                  <div class="provider-card add-tile" @click="showAddMCPDialog = true; this.newMCPJson = '';updateMCPExample()">
                    <el-icon :size="40" color="#909399"><i class="fa-solid fa-plus"></i></el-icon>
                    <div style="color: #606266; margin-top: 10px;">{{ t('addNewMCP') }}</div>
                  </div>
                </div>

                <!-- 添加MCP对话框 -->
                <el-dialog
                  v-model="showAddMCPDialog"
                  :title="t('addNewMCP')"
                  width="600px"
                  @closed="newMCPJson = ''">
                  <el-form label-position="top">
                    <el-form-item :label="t('serverType')">
                      <el-select 
                        v-model="newMCPType" 
                        @change="updateMCPExample"
                        class="full-width-input">
                        <el-option 
                          :label="t('stdioServer')" 
                          value="stdio">
                        </el-option>
                        <el-option
                          :label="t('sseServer')"
                          value="sse">
                        </el-option>
                        <el-option
                          :label="t('wsServer')"
                          value="ws">
                        </el-option>
                        <el-option
                          :label="t('streamableHttpServer')"
                          value="streamablehttp">
                        </el-option>
                      </el-select>
                    </el-form-item>
                
                    <el-alert type="info" :closable="false" class="mb-2">
                      {{ t('mcpJsonFormat') }}
                      <pre class="json-example">{{ currentMCPExample }}</pre>
                    </el-alert>
                
                    <el-form-item :label="t('mcpJsonInput')">
                      <el-input
                        v-model="newMCPJson"
                        type="textarea"
                        :rows="8"
                        :placeholder="t('mcpJsonPlaceholder')"
                        resize="none"/>
                    </el-form-item>
                  </el-form>
                  <template #footer>
                    <el-button @click="showAddMCPDialog = false; this.newMCPJson = ''">{{ t('cancel') }}</el-button>
                    <el-button 
                      type="primary" 
                      @click="addMCPServer"
                      :disabled="!newMCPJson">
                      {{ t('confirmAdd') }}
                    </el-button>
                  </template>
                </el-dialog>          
                <el-dialog
                  v-model="showMCPConfirm"
                  :title="t('confirmDeleteTitle')"
                  width="400px"
                  @closed="deletingMCPName = null">
                  <div class="confirm-content">
                    <p>{{ t('confirmDeleteMCP', { name: deletingMCPName }) }}</p>
                    <div class="confirm-buttons">
                      <el-button @click="showMCPConfirm = false">{{ t('cancel') }}</el-button>
                      <el-button type="danger" @click="confirmDeleteMCP">{{ t('confirm') }}</el-button>
                    </div>
                  </div>
                </el-dialog>
              </div>
              <!-- LLM工具页面 -->
              <div v-show="subMenu === 'llmTool'" class="page llm-tool-container">
                <!-- 磁贴网格 -->
                <div class="provider-grid">
                  <!-- 已有LLM工具配置 -->
                  <div class="provider-card llm-card" v-for="(tool, id) in llmTools" :key="id">
                    <div class="card-header">
                      <el-switch v-model="tool.enabled" @change="autoSaveSettings"></el-switch>
                      <div class="card-actions">
                        <el-button @click="removeLLMTool(id)" type="danger" circle size="small">
                          <i class="fa-solid fa-trash"></i>
                        </el-button>
                      </div>
                    </div>
                    <div class="llm-content">
                      <h3 class="knowledge-info">{{ tool.name }}</h3>
                      <el-tag type="info" size="small">{{ toolTypeLabel(tool.type) }}</el-tag>
                      <p class="knowledge-desc">{{ tool.description || t('noDescription') }}</p>
                    </div>
                  </div>
                  
                  <!-- 添加新LLM工具 -->
                  <div class="provider-card add-tile" @click="showLLMForm = true">
                    <el-icon :size="40" color="#909399"><i class="fa-solid fa-plus"></i></el-icon>
                    <div style="color: #606266; margin-top: 10px;">{{ t('addLLMTool') }}</div>
                  </div>
                </div>

                <!-- 添加/编辑LLM工具对话框 -->
                <el-dialog v-model="showLLMForm" :title="editingLLM ? t('editLLMTool') : t('addLLMTool')" width="600px">
                  <el-form label-position="top">
                    <el-form-item :label="t('toolName')" required>
                      <el-input v-model="newLLMTool.name" :placeholder="t('toolNamePlaceholder')"/>
                    </el-form-item>

                    <el-form-item :label="t('interfaceType')" required>
                      <el-select 
                        v-model="newLLMTool.type" 
                        @change="handleTypeChange"
                        filterable
                        allow-create
                        :placeholder="t('selectInterfaceType')">
                        <el-option
                          v-for="type in llmInterfaceTypes"
                          :key="type.value"
                          :label="type.label"
                          :value="type.value"
                        />
                      </el-select>
                    </el-form-item>

                    <el-form-item :label="t('description')" required>
                      <el-input
                        v-model="newLLMTool.description"
                        type="textarea"
                        :rows="3"
                        :placeholder="t('descriptionPlaceholder')"
                      />
                    </el-form-item>

                    <el-form-item :label="t('baseURL')" required>
                      <el-input
                        v-model="newLLMTool.base_url"
                        :placeholder="defaultBaseURL"
                      />
                    </el-form-item>

                    <el-form-item :label="t('apiKey')" required>
                      <el-input
                        v-model="newLLMTool.api_key"
                        show-password
                      />
                    </el-form-item>

                    <el-form-item :label="t('modelName')" required>
                      <el-input
                        v-model="newLLMTool.model"
                      >
                      </el-input>
                    </el-form-item>
                  </el-form>

                  <template #footer>
                    <el-button @click="cancelLLMTool">{{ t('cancel') }}</el-button>
                    <el-button 
                      type="primary" 
                      @click="saveLLMTool"
                      :disabled="!formValid">
                      {{ editingLLM ? t('save') : t('createImmediately') }}
                    </el-button>
                  </template>
                </el-dialog>
              </div>
              <!-- 自定义HTTP工具页面 -->
              <div v-show="subMenu === 'customHttpTool'" class="page custom-http-tool-container">
                <!-- 磁贴网格 -->
                <div class="provider-grid">
                  <div class="provider-card custom-http-tool-card" v-for="tool in customHttpTools" :key="tool.id">
                    <div class="card-header">
                      <el-switch v-model="tool.enabled" @change="autoSaveSettings"></el-switch>
                      <div class="card-actions">
                        <el-button @click="editCustomHttpTool(tool.id)" type="default" circle size="small">
                          <i class="fa-solid fa-pen-to-square"></i>
                        </el-button>
                        <el-button @click="removeCustomHttpTool(tool.id)" type="danger" circle size="small">
                          <i class="fa-solid fa-trash"></i>
                        </el-button>
                      </div>
                    </div>
                    <div class="custom-http-tool-content">
                      <h3 class="custom-http-tool-name">{{ tool.name }}</h3>
                      <p class="custom-http-tool-description">{{ tool.description }}</p>
                    </div>
                  </div>
                  <!-- 添加新自定义HTTP工具 -->
                  <div class="provider-card add-tile" @click="showCustomHttpToolForm = true">
                    <el-icon :size="40" color="#909399"><i class="fa-solid fa-plus"></i></el-icon>
                    <div style="color: #606266; margin-top: 10px;">{{ t('addCustomHttpTool') }}</div>
                  </div>
                </div>

                <!-- 添加/编辑自定义HTTP工具对话框 -->
                <el-dialog v-model="showCustomHttpToolForm" :title="editingCustomHttpTool ? t('editCustomHttpTool') : t('addCustomHttpTool')" width="600px">
                  <el-form label-position="top">
                    <el-form-item :label="t('toolName')" required>
                      <el-input v-model="newCustomHttpTool.name" :placeholder="t('HTTPNamePlaceholder')"></el-input>
                    </el-form-item>
                    <el-form-item :label="t('description')" required>
                      <el-input v-model="newCustomHttpTool.description" type="textarea" :rows="3" :placeholder="t('descriptionPlaceholder')"></el-input>
                    </el-form-item>
                    <el-form-item :label="t('URL')" required>
                      <el-input v-model="newCustomHttpTool.url" :placeholder="t('urlPlaceholder')"></el-input>
                    </el-form-item>
                    <el-form-item :label="t('method')" required>
                      <el-select v-model="newCustomHttpTool.method" placeholder="Select method">
                        <el-option label="GET" value="GET"></el-option>
                        <el-option label="POST" value="POST"></el-option>
                        <el-option label="PUT" value="PUT"></el-option>
                        <el-option label="DELETE" value="DELETE"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item :label="t('headers')">
                      <el-input v-model="newCustomHttpTool.headers" type="textarea" :rows="4" :placeholder="t('headersPlaceholder')"></el-input>
                    </el-form-item>
                    <el-form-item :label="t('body')">
                      <el-input v-model="newCustomHttpTool.body" type="textarea" :rows="20" :placeholder="t('bodyPlaceholder')"></el-input>
                      <el-alert type="info" :closable="false">
                        {{ t('bodyJsonSchemaFormat') }}
                      </el-alert>
                    </el-form-item>
                  </el-form>
                  <template #footer>
                    <el-button @click="showCustomHttpToolForm = false">{{ t('cancel') }}</el-button>
                    <el-button type="primary" @click="saveCustomHttpTool" :disabled="!newCustomHttpTool.name || !newCustomHttpTool.url">
                      {{ editingCustomHttpTool ? t('save') : t('createImmediately') }}
                    </el-button>
                  </template>
                </el-dialog>
              </div>
            </div>
          </div>
        </div>
        <!-- 在内容区添加存储空间界面 -->
        <div v-show="activeMenu === 'storage'" class="page storage-container">
          <div class="suite-layout">
            <!-- 左侧二级导航 -->
            <div class="suite-sidebar">
              <div class="tile-nav">
                <div 
                  v-for="tile in storageTiles" 
                  :key="tile.id"
                  class="nav-item"
                  :class="{ active: subMenu === tile.id }"
                  @click="subMenu = tile.id">
                  <el-icon class="nav-icon"><i :class="tile.icon"></i></el-icon>
                  <span class="nav-text">{{ t(tile.title) }}</span>
                </div>
              </div>
            </div>
            
            <!-- 右侧内容区 -->
            <div class="suite-content">
              <!-- 文本存储 -->
              <div v-show="subMenu === 'text'" class="page text-container">
                <div class="text-list">
                  <!-- 文件列表 -->
                  <div class="file-item" v-for="(file, index) in textFiles" :key="index">
                    <el-icon class="file-icon"><i class="fa-solid fa-file-lines"></i></el-icon>
                    <div class="file-info">
                      <span class="file-name">{{ file.original_filename }}</span>
                    </div>
                    <div class="file-actions">
                      <!-- 复制链接按钮 -->
                      <el-button circle size="small" class="file-actions-btn" @click="copyLink(file.unique_filename)">
                        <i class="fa-solid fa-link"></i>
                      </el-button>
                      <!-- 下载按钮 -->
                      <a :href="`${partyURL}/uploaded_files/${file.unique_filename}`" download target="_blank">
                        <el-button circle size="small" class="file-actions-btn">
                            <i class="fa-solid fa-download"></i>
                        </el-button>
                      </a>
                      <!-- 删除按钮 -->
                      <el-button type="danger" circle size="small" class="file-actions-btn" @click="deleteFile(file)">
                        <i class="fa-solid fa-trash"></i>
                      </el-button>
                    </div>
                  </div>
                </div>
                <!-- 如果文件列表长度为0 -->
                <div v-if="textFiles.length === 0" class="no-files">
                  <el-empty :description="t('noFiles')" />
                </div>
              </div>
              <!-- 图片存储 -->
              <div v-show="subMenu === 'image'" class="page image-container">
                <div class="image-grid">
                  <div class="image-item" v-for="(img, index) in imageFiles" :key="index">
                    <img :src="`${partyURL}/uploaded_files/${img.unique_filename}`" class="thumbnail"/>
                    <div class="image-overlay">
                      <span class="image-name">{{ img.name }}</span>
                      <div class="image-actions">
                        <!-- 复制链接按钮 -->
                        <el-button circle size="small" class="image-actions-btn" @click="copyLink(img.unique_filename)">
                          <i class="fa-solid fa-link"></i>
                        </el-button>
                        <!-- 新增预览按钮 -->
                        <el-button circle size="small" class="image-actions-btn" @click="previewImage(img)">
                          <i class="fa-solid fa-eye"></i>
                        </el-button>
                        
                        <!-- 下载按钮 -->
                        <a :href="`${partyURL}/uploaded_files/${img.unique_filename}`" download target="_blank">
                          <el-button circle size="small" class="image-actions-btn">
                              <i class="fa-solid fa-download"></i>
                          </el-button>
                        </a>
                        
                        <el-button type="danger" class="image-actions-btn" circle size="small" @click="deleteImage(img)">
                          <i class="fa-solid fa-trash"></i>
                        </el-button>
                      </div>
                    </div>
                  </div>
                </div>
                <div v-if="imageFiles.length === 0" class="no-Images">
                  <el-empty :description="t('noImages')" />
                </div>
                <el-dialog
                  v-model="previewVisible"
                  :title="t('preview')"
                  class="image-preview-dialog"
                  width="600px">
                  <div class="preview-container">
                    <img 
                      :src="previewImageUrl" 
                      class="preview-image"
                      alt="Preview"
                    />
                  </div>
                </el-dialog>
              </div>
              <!-- 视频存储 -->
              <div v-show="subMenu === 'video'" class="page video-container">
                <div class="video-list">
                  <div class="video-item" v-for="(video, index) in videoFiles" :key="index">
                    <div class="video-wrapper">
                      <!-- 视频播放器 -->
                      <video controls>
                        <source :src="`${partyURL}/uploaded_files/${video.unique_filename}`" type="video/mp4">
                        Your browser does not support the video tag.
                      </video>

                      <!-- 删除按钮定位在视频右上角 -->
                      <el-button class="delete-overlay-btn" type="danger" circle @click="deleteVideo(video)">
                        <i class="fa-solid fa-trash"></i>
                      </el-button>
                    </div>
                  </div>
                </div>
                <div v-if="videoFiles.length === 0" class="no-Videos">
                  <el-empty :description="t('noVideos')" />
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- logo页面 -->
        <div v-show="activeMenu === 'logo'" class="page logo-container">
          <div class="license-notice">
            <h1>Super Agent Party v0.2.4</h1>
            <h3>开源协议声明 / Open Source License</h3>
            <div class="notice-section">
              <p class="warning-text">❗ 注意！本项目是基于AGPL协议开源的，请遵守AGPL协议，以避免不必要的法律问题！</p>
              <p class="warning-text-en">❗ Attention! This project is open source based on the AGPL agreement, please abide by the AGPL agreement to avoid unnecessary legal problems!</p>
            </div>

            <div class="contact-section">
              <h3>联系我们 / Contact</h3>
              <div class="contact-card">
                <p>商业授权咨询：
                  <a href="mailto:hst97@qq.com" class="contact-link">hst97@qq.com</a>
                </p>
                <p>Commercial License：
                  <a href="mailto:hst97@qq.com" class="contact-link">hst97@qq.com</a>
                </p>
              </div>
            </div>

            <div class="social-links">
              <div class="link-item">
                <el-icon class="logo-icon">
                  <i class="fa-brands fa-github"></i>
                </el-icon>
                <span>GitHub：</span>
                <a href="https://github.com/heshengtao/super-agent-party" 
                  target="_blank" 
                  class="social-link">
                  heshengtao/super-agent-party
                </a>
              </div>
              
              <div class="link-item">
                <el-icon class="logo-icon">
                  <i class="fa-brands fa-gitter"></i>
                </el-icon>
                <span>Gitee：</span>
                <a href="https://gitee.com/heshengtao/super-agent-party" 
                  target="_blank" 
                  class="social-link">
                  heshengtao/super-agent-party
                </a>
              </div>

              <div class="link-item">
                <el-icon>
                  <i class="fa-brands fa-bilibili"></i>
                </el-icon>
                <span>Bilibili：</span>
                <a href="https://space.bilibili.com/26978344" 
                  target="_blank" 
                  class="social-link">
                  @派酱llm-party
                </a>
              </div>

              <div class="link-item">
                <el-icon>
                  <i class="fa-brands fa-youtube"></i>
                </el-icon>
                <span>Youtube：</span>
                <a href="https://www.youtube.com/@agentParty" 
                  target="_blank" 
                  class="social-link">
                  @agentParty
                </a>
              </div>

              <div class="link-item">
                <el-icon>
                  <i class="fa-brands fa-discord"></i>
                </el-icon>
                <span>discord：</span>
                <a href="https://discord.com/invite/f2dsAKKr2V" 
                  target="_blank" 
                  class="social-link">
                  @llm-party
                </a>
              </div>

              <div class="link-item">
                <el-icon>
                  <i class="fa-brands fa-qq"></i>
                </el-icon>
                <span>QQ交流群：</span>
                <span class="qq-group">931057213</span>
              </div>

              <div class="link-item">
                <el-icon>
                  <i class="fa-solid fa-file"></i>
                </el-icon>
                <span>中文文档：</span>
                <a href="https://gcnij7egmcww.feishu.cn/wiki/DPRKwdetCiYBhPkPpXWcugujnRc" 
                  target="_blank" 
                  class="social-link">
                  点击访问
                </a>
              </div>

              <div class="link-item">
                <el-icon>
                  <i class="fa-solid fa-file"></i>
                </el-icon>
                <span>English Doc：</span>
                <a href="https://temporal-lantern-7e8.notion.site/super-agent-party-211b2b2cb6f180c899d1c27a98c4965d" 
                  target="_blank" 
                  class="social-link">
                  Click to access
                </a>
              </div>
            </div>

            <div class="agreement-section">
              <p>完整AGPL协议内容请访问：
                <a href="https://www.gnu.org/licenses/agpl-3.0.html" 
                  target="_blank" 
                  class="agreement-link">
                  GNU Affero General Public License v3.0
                </a>
              </p>
            </div>
          </div>
        </div>
        <div v-show="activeMenu === 'deploy-bot'" class="page deploy-container">
            <div class="suite-layout">
                <!-- 左侧导航 -->
                <div class="suite-sidebar">
                    <div class="tile-nav">
                        <div 
                            v-for="tile in deployTiles" 
                            class="nav-item"
                            :class="{ active: subMenu === tile.id }"
                            @click="subMenu = tile.id">
                            <el-icon class="nav-icon"><i :class="tile.icon"></i></el-icon>
                            <span class="nav-text">{{ t(tile.title) }}</span>
                        </div>
                    </div>
                </div>
                
                <!-- 右侧内容 -->
                <div class="suite-content">
                  <!-- 通用配置页面 -->
                  <div v-show="subMenu === 'bot_config'">
                    <el-form class="settings-form" :model="BotConfig" label-position="top">
                      <div class="tool-item">
                        <!-- 通用配置头部 -->
                        <div class="tool-header" style="display: flex; justify-content: space-between; align-items: center;">
                          <span>
                            <el-icon><i class="fa-solid fa-robot"></i></el-icon>
                            {{ t('bot_config') }} <!-- 本地化文本 -->
                          </span>
                        </div>
                        <div class="tool-item">
                          <div class="tool-header">
                            <div class="header-left">
                              <span>
                                {{t('imgHost')}}
                              </span>
                            </div>
                            <el-switch v-model="BotConfig.imgHost_enabled" @click.stop @change="autoSaveSettings"/>
                          </div>
                          <div class="tool-content">
                            <!-- 图床/文件床配置 -->
                            <el-form-item :label="t('imgHostType')">
                              <template #label>
                                  <span>
                                    {{ t('imgHostType') }}
                                    <el-link
                                      v-if="BotConfig.imgHost === 'smms'"
                                      type="primary"
                                      :underline="false"
                                      href="https://sm.ms/" 
                                      target="_blank"
                                    >
                                      <el-icon class="mr-1">
                                        <i class="fa-solid fa-key"></i>
                                      </el-icon>{{ t('gotoAPI') }}
                                    </el-link>
                                    <el-link
                                      v-if="BotConfig.imgHost === 'easyImage2'"
                                      type="primary"
                                      :underline="false"
                                      href="https://github.com/icret/EasyImages2.0" 
                                      target="_blank"
                                    >
                                      <el-icon class="mr-1">
                                        <i class="fa-solid fa-key"></i>
                                      </el-icon>{{ t('gotoEasyImage2Github') }}
                                    </el-link>
                                    <el-link
                                      v-if="BotConfig.imgHost === 'github'"
                                      type="primary"
                                      :underline="false"
                                      href="https://github.com/settings/tokens" 
                                      target="_blank"
                                    >
                                      <el-icon class="mr-1">
                                        <i class="fa-solid fa-key"></i>
                                      </el-icon>{{ t('gotoAPI') }}
                                    </el-link>
                                    <el-link
                                      v-if="BotConfig.imgHost === 'gitee'"
                                      type="primary"
                                      :underline="false"
                                      href="https://gitee.com/profile/personal_access_tokens" 
                                      target="_blank"
                                    >
                                      <el-icon class="mr-1">
                                        <i class="fa-solid fa-key"></i>
                                      </el-icon>{{ t('gotoAPI') }}
                                    </el-link>
                                  </span>
                              </template>
                              <el-select 
                                v-model="BotConfig.imgHost"
                                @change="changeImgHost">
                                <el-option
                                  v-for="option in imgHostOptions"
                                  :key="option.value"
                                  :label="option.label"
                                  :value="option.value"
                                >
                                </el-option>
                              </el-select>
                            </el-form-item>
                            <!--sm.ms图床-->
                            <el-form-item v-if="BotConfig.imgHost === 'smms'" :label="t('apiKey')">
                              <el-input
                                v-model="BotConfig.SMMS_api_key"
                                :placeholder="t('apiKeyPlaceholder')"
                                class="full-width-input"
                                show-password
                                @change="autoSaveSettings"
                              />
                            </el-form-item>
                            <!--gitee图床-->
                            <el-form-item v-if="BotConfig.imgHost === 'gitee'" :label="t('repo_owner')">
                              <el-input
                                v-model="BotConfig.gitee_repo_owner"
                                :placeholder="t('repo_owner_placeholder')"
                                class="full-width-input"
                                @change="autoSaveSettings"
                              />
                            </el-form-item>
                            <el-form-item v-if="BotConfig.imgHost === 'gitee'" :label="t('repo_name')">
                              <el-input
                                v-model="BotConfig.gitee_repo_name"
                                :placeholder="t('repo_name_placeholder')"
                                class="full-width-input"
                                @change="autoSaveSettings"
                              />
                            </el-form-item>
                            <el-form-item v-if="BotConfig.imgHost === 'gitee'" :label="t('branch')">
                              <el-input
                                v-model="BotConfig.gitee_branch"
                                :placeholder="t('branch_placeholder')"
                                class="full-width-input"
                                @change="autoSaveSettings"
                              />
                            </el-form-item>
                            <el-form-item v-if="BotConfig.imgHost === 'gitee'" :label="t('token')">
                              <el-input
                                v-model="BotConfig.gitee_token"
                                :placeholder="t('token_placeholder')"
                                class="full-width-input"
                                show-password
                                @change="autoSaveSettings"
                              />
                            </el-form-item>
                            <!--github图床-->
                            <el-form-item v-if="BotConfig.imgHost === 'github'" :label="t('repo_owner')">
                              <el-input
                                v-model="BotConfig.github_repo_owner"
                                :placeholder="t('repo_owner_placeholder')"
                                class="full-width-input"
                                @change="autoSaveSettings"
                              />
                            </el-form-item>
                            <el-form-item v-if="BotConfig.imgHost === 'github'" :label="t('repo_name')">
                              <el-input
                                v-model="BotConfig.github_repo_name"
                                :placeholder="t('repo_name_placeholder')"
                                class="full-width-input"
                                @change="autoSaveSettings"
                              />
                            </el-form-item>
                            <el-form-item v-if="BotConfig.imgHost === 'github'" :label="t('branch')">
                              <el-input
                                v-model="BotConfig.github_branch"
                                :placeholder="t('branch_placeholder')"
                                class="full-width-input"
                                @change="autoSaveSettings"
                              />
                            </el-form-item>
                            <el-form-item v-if="BotConfig.imgHost === 'github'" :label="t('token')">
                              <el-input
                                v-model="BotConfig.github_token"
                                :placeholder="t('token_placeholder')"
                                class="full-width-input"
                                show-password
                                @change="autoSaveSettings"
                              />
                            </el-form-item>
                            <!--easyimage2图床-->
                            <el-form-item v-if="BotConfig.imgHost === 'easyImage2'" :label="t('baseURL')">
                              <el-input
                                v-model="BotConfig.EI2_base_url"
                                placeholder="https://png.cm/api/index.php"
                                class="full-width-input"
                                @change="autoSaveSettings"
                              />
                            </el-form-item>
                            <el-form-item v-if="BotConfig.imgHost === 'easyImage2'"  :label="t('apiKey')">
                              <el-input
                                v-model="BotConfig.EI2_api_key"
                                :placeholder="t('apiKeyPlaceholder')"
                                class="full-width-input"
                                show-password
                                @change="autoSaveSettings"
                              />
                            </el-form-item>
                          </div>
                        </div>
                      </div>
                    </el-form>
                  </div>
                  <!-- QQ机器人配置页面 -->
                  <div v-show="subMenu === 'qq_bot'">
                    <el-form class="settings-form" :model="qqBotConfig" label-position="top">
                      <div class="tool-item">
                        <!-- QQ机器人配置头部 -->
                        <div class="tool-header" style="display: flex; justify-content: space-between; align-items: center;">
                          <span>
                            <el-icon><i class="fa-brands fa-qq"></i></el-icon>
                            {{ t('qq_bot_config') }}
                            <el-link
                              type="primary"
                              :underline="false"
                              href="https://q.qq.com/" 
                              target="_blank"
                            >
                              <el-icon class="mr-1">
                                <i class="fa-solid fa-key"></i>
                              </el-icon>{{ t('gotoQQbot') }}
                            </el-link>
                          </span>
                          <div>
                            <!-- 启动按钮 -->
                            <el-tooltip :content="t('start_bot')" placement="top">
                              <el-button 
                                type="primary" 
                                @click="startQQBot" 
                                :disabled="!isQQBotConfigValid || isQQBotRunning || isStarting"
                                circle
                              >
                                <template v-if="isStarting">
                                  <i class="fa-solid fa-spinner fa-spin"></i>
                                </template>
                                <template v-else>
                                  <i class="fa-solid fa-play"></i>
                                </template>
                              </el-button>
                            </el-tooltip>
                            
                            <!-- 停止按钮 -->
                            <el-tooltip :content="t('stop_bot')" placement="top">
                              <el-button 
                                type="danger" 
                                @click="stopQQBot" 
                                :disabled="!isQQBotRunning || isStopping"
                                circle
                              >
                                <template v-if="isStopping">
                                  <i class="fa-solid fa-spinner fa-spin"></i>
                                </template>
                                <template v-else>
                                  <i class="fa-solid fa-stop"></i>
                                </template>
                              </el-button>
                            </el-tooltip>
                            
                            <!-- 重载按钮 -->
                            <el-tooltip :content="t('reload_bot')" placement="top">
                              <el-button 
                                @click="reloadQQBotConfig" 
                                :disabled="!isQQBotRunning || isReloading"
                                circle
                              >
                                <template v-if="isReloading">
                                  <i class="fa-solid fa-rotate fa-spin"></i>
                                </template>
                                <template v-else>
                                  <i class="fa-solid fa-rotate"></i>
                                </template>
                              </el-button>
                            </el-tooltip>
                          </div>
                        </div>
                        <div class="tool-content">
                            <!-- 主智能体选择 -->
                            <el-form-item :label="t('mainAgent')" required>
                              <el-select 
                                v-model="qqBotConfig.QQAgent"
                                @change="changeQQAgent">
                                <el-option
                                  :label="t('defaultAgent')"
                                  value="super-model"
                                >
                                </el-option>
                                <el-option
                                  v-for="(agent, id) in agents"
                                  :key="id"
                                  :label="agent.name"
                                  :value="id"
                                >
                                </el-option>
                              </el-select>
                            </el-form-item>
                            <el-form-item :label="t('separators')" required>
                              <el-select
                                v-model="qqBotConfig.separators"
                                multiple
                                filterable
                                allow-create
                                @keyup.enter.native="handleEnter"
                                @create="handleCreateSeparator"
                              >
                                <el-option
                                  v-for="sep in filteredSeparators"
                                  :key="sep.value"
                                  :label="sep.label"
                                  :value="sep.value"
                                />
                              </el-select>
                            </el-form-item>
                            <el-form-item :label="t('conversationRounds')" class="form-item-align">
                              <el-slider
                                v-model="qqBotConfig.memoryLimit"
                                :min="0"
                                :max="1000"
                                :step="2"
                                @input="autoSaveSettings"
                              />
                            </el-form-item>
                            <el-form-item :label="t('reasoningVisibleEnable')" class="form-item-align" label-position="left">
                              <el-switch
                                v-model="qqBotConfig.reasoningVisible"
                                @change="autoSaveSettings"
                              ></el-switch>
                            </el-form-item>
                            <el-form-item :label="t('quickRestartEnable')" class="form-item-align" label-position="left">
                              <el-switch
                                v-model="qqBotConfig.quickRestart"
                                @change="autoSaveSettings"
                              ></el-switch>
                            </el-form-item>
                            <el-form-item label="APP ID" required>
                                <el-input @change="autoSaveSettings" v-model="qqBotConfig.appid" :placeholder="t('enter_qq_bot_app_id')" class="full-width-input"></el-input>
                            </el-form-item>
                            <el-form-item label="APP Secret" required>
                                <el-input @change="autoSaveSettings" v-model="qqBotConfig.secret" :placeholder="t('enter_qq_bot_secret')" show-password class="full-width-input"></el-input>
                            </el-form-item>
                        </div>
                      </div>
                    </el-form>
                  </div>

                  <!-- 微信机器人配置页面 -->
                  <div v-show="subMenu === 'wx_bot'" v-if="isWindows">
                    <el-form class="settings-form" :model="WXBotConfig" label-position="top">
                      <div class="tool-item">
                        <!-- 微信机器人配置头部 -->
                        <div class="tool-header" style="display: flex; justify-content: space-between; align-items: center;">
                          <span>
                            <el-icon><i class="fa-brands fa-weixin"></i></el-icon>
                            {{ t('wx_bot_config') }}
                          </span>
                          <div>
                            <!-- 启动按钮 -->
                            <el-tooltip :content="t('start_bot')" placement="top">
                              <el-button 
                                type="primary" 
                                @click="startWXBot" 
                                :disabled="!isWXBotConfigValid || isWXBotRunning || isWXStarting"
                                circle
                              >
                                <template v-if="isWXStarting">
                                  <i class="fa-solid fa-spinner fa-spin"></i>
                                </template>
                                <template v-else>
                                  <i class="fa-solid fa-play"></i>
                                </template>
                              </el-button>
                            </el-tooltip>
                            
                            <!-- 停止按钮 -->
                            <el-tooltip :content="t('stop_bot')" placement="top">
                              <el-button 
                                type="danger" 
                                @click="stopWXBot" 
                                :disabled="!isWXBotRunning || isWXStopping"
                                circle
                              >
                                <template v-if="isWXStopping">
                                  <i class="fa-solid fa-spinner fa-spin"></i>
                                </template>
                                <template v-else>
                                  <i class="fa-solid fa-stop"></i>
                                </template>
                              </el-button>
                            </el-tooltip>
                            
                            <!-- 重载按钮 -->
                            <el-tooltip :content="t('reload_bot')" placement="top">
                              <el-button 
                                @click="reloadWXBotConfig" 
                                :disabled="!isWXBotRunning || isWXReloading"
                                circle
                              >
                                <template v-if="isWXReloading">
                                  <i class="fa-solid fa-rotate fa-spin"></i>
                                </template>
                                <template v-else>
                                  <i class="fa-solid fa-rotate"></i>
                                </template>
                              </el-button>
                            </el-tooltip>
                          </div>
                        </div>
                        <div class="tool-content">
                            <!-- 主智能体选择 -->
                            <el-form-item :label="t('mainAgent')" required>
                              <el-select 
                                v-model="WXBotConfig.WXAgent"
                                @change="changeWXAgent">
                                <el-option
                                  :label="t('defaultAgent')"
                                  value="super-model"
                                >
                                </el-option>
                                <el-option
                                  v-for="(agent, id) in agents"
                                  :key="id"
                                  :label="agent.name"
                                  :value="id"
                                >
                                </el-option>
                              </el-select>
                            </el-form-item>
                            <el-form-item :label="t('separators')" required>
                              <el-select
                                v-model="WXBotConfig.separators"
                                multiple
                                filterable
                                allow-create
                                @keyup.enter.native="handleEnter"
                                @create="handleCreateSeparator"
                              >
                                <el-option
                                  v-for="sep in filteredSeparators"
                                  :key="sep.value"
                                  :label="sep.label"
                                  :value="sep.value"
                                />
                              </el-select>
                            </el-form-item>
                            <el-form-item :label="t('conversationRounds')" class="form-item-align">
                              <el-slider
                                v-model="WXBotConfig.memoryLimit"
                                :min="0"
                                :max="1000"
                                :step="2"
                                @input="autoSaveSettings"
                              />
                            </el-form-item>
                            <el-form-item :label="t('reasoningVisibleEnable')" class="form-item-align" label-position="left">
                              <el-switch
                                v-model="WXBotConfig.reasoningVisible"
                                @change="autoSaveSettings"
                              ></el-switch>
                            </el-form-item>
                            <el-form-item :label="t('quickRestartEnable')" class="form-item-align" label-position="left">
                              <el-switch
                                v-model="WXBotConfig.quickRestart"
                                @change="autoSaveSettings"
                              ></el-switch>
                            </el-form-item>
                            <el-form-item :label="t('nickName')" required>
                              <el-select
                                v-model="WXBotConfig.nickNameList"
                                multiple
                                filterable
                                allow-create
                                :placeholder="t('nickNamePlaceholder')"
                                class="full-width-input"
                                @change="autoSaveSettings"
                              >
                              </el-select>
                            </el-form-item>
                            <el-form-item :label="t('groupWakeWord')" class="form-item-align">
                              <el-input
                                v-model="WXBotConfig.wakeWord"
                                :placeholder="t('wakeWordPlaceholder')"
                                @input="autoSaveSettings"
                                class="full-width-input"
                              />
                            </el-form-item>
                            <el-alert
                              type="info"
                              :closable="false"
                              class="mb-2"
                            >
                              <template #default>
                                <div class="alert-content">
                                  {{ t('wxNotice') }}
                                </div>
                              </template>
                            </el-alert>
                        </div>
                      </div>
                    </el-form>
                  </div>
                  <div v-show="subMenu === 'wx_bot'" v-if="!isWindows">
                    <el-empty :description="t('windowsOnly')" />
                  </div>
                  <!-- 桌宠配置页面 -->
                  <div v-show="subMenu === 'table_pet'">
                    <el-form class="settings-form" :model="VRMConfig" label-position="top">
                      <div class="tool-item">
                        <!-- 桌宠机器人配置头部 -->
                        <div class="tool-header" style="display: flex; justify-content: space-between; align-items: center;">
                          <span>
                            <el-icon><i class="fa-solid fa-user-ninja"></i></el-icon>
                            {{ t('table_pet_config') }}
                            <el-link
                              type="primary"
                              :underline="false"
                              href="https://vroid.com/en/studio" 
                              target="_blank"
                            >
                              <el-icon class="mr-1">
                                <i class="fa-solid fa-key"></i>
                              </el-icon>{{ t('gotoVroid') }}
                            </el-link>
                            <span>{{ '  ' }}</span>
                            <el-link
                              type="primary"
                              :underline="false"
                              href="https://hub.vroid.com/en" 
                              target="_blank"
                            >
                              <el-icon class="mr-1">
                                <i class="fa-solid fa-cube"></i>
                              </el-icon>{{ t('gotoVroidHub') }}
                            </el-link>
                            <span>{{ '  ' }}</span>
                            <el-link
                              type="primary"
                              :underline="false"
                              href="https://www.aplaybox.com/search?value=VRM" 
                              target="_blank"
                            >
                              <el-icon class="mr-1">
                                <i class="fa-solid fa-cube"></i>
                              </el-icon>{{ t('gotoAplaybox') }}
                            </el-link>
                          </span>
                          <div>
                            <!-- 启动按钮 -->
                            <el-tooltip :content="t('start_table_pet')" placement="top">
                              <el-button 
                                type="primary" 
                                @click="startVRM" 
                                circle
                              >
                                <template v-if="isVRMStarting">
                                  <i class="fa-solid fa-spinner fa-spin"></i>
                                </template>
                                <template v-else>
                                  <i class="fa-solid fa-play"></i>
                                </template>
                              </el-button>
                            </el-tooltip>
                            <!-- 在浏览器启动按钮 -->
                            <el-tooltip :content="t('start_table_pet_web')" placement="top">
                              <el-button 
                                type="primary" 
                                @click="startVRMweb" 
                                circle
                              >
                                <template v-if="isVRMStarting">
                                  <i class="fa-solid fa-spinner fa-spin"></i>
                                </template>
                                <template v-else>
                                  <i class="fa-solid fa-window-maximize"></i>
                                </template>
                              </el-button>
                            </el-tooltip>
                          </div>
                        </div>
                        <div class="tool-content">
                            <!-- 主智能体选择 -->
                            <el-form-item :label="t('mainAgent')" required>
                              <el-select 
                                v-model="mainAgent"
                                @change="autoSaveSettings">
                                <el-option
                                  :label="t('defaultAgent')"
                                  value="super-model"
                                >
                                </el-option>
                                <el-option
                                  v-for="(agent, id) in agents"
                                  :key="id"
                                  :label="agent.name"
                                  :value="id"
                                >
                                </el-option>
                              </el-select>
                            </el-form-item>

                            <el-form-item :label="t('windowWidth')" class="form-item-align">
                              <el-slider
                                v-model="VRMConfig.windowWidth"
                                :min="300"
                                :max="2560"
                                :step="10"
                                @change="autoSaveSettings"
                              />
                            </el-form-item>
                            <el-form-item :label="t('windowHeight')" class="form-item-align">
                              <el-slider
                                v-model="VRMConfig.windowHeight"
                                :min="300"
                                :max="2560"
                                :step="10"
                                @change="autoSaveSettings"
                              />
                            </el-form-item>

                            <el-form-item :label="t('enabledExpressions')" class="form-item-align" label-position="left">
                              <el-switch 
                                v-model="VRMConfig.enabledExpressions" 
                                @change="autoSaveSettings"
                              ></el-switch>
                            </el-form-item>
                            
                            <el-form-item :label="t('asyncTools')" class="form-item-align" label-position="left">
                              <el-switch 
                                v-model="toolsSettings.asyncTools.enabled" 
                                @change="autoSaveSettings"
                              ></el-switch>
                            </el-form-item>

                            <!-- VRM模型选择框 -->
                            <el-select
                              v-model="VRMConfig.selectedModelId"
                              @change="handleModelChange"
                              class="full-width-input"
                            >
                              <!-- 默认模型选项（不可删除） -->
                              <el-option
                                v-for="model in VRMConfig.defaultModels"
                                :key="model.id"
                                :label="model.name"
                                :value="model.id"
                              >
                                <div class="model-option-item">
                                  <span>{{ model.name }}</span>
                                  <i class="fa-solid fa-star" style="color: #f39c12"></i>
                                </div>
                              </el-option>
                              
                              <!-- 用户上传的模型选项（可删除） -->
                              <el-option
                                v-for="model in VRMConfig.userModels"
                                :key="model.id"
                                :label="model.name"
                                :value="model.id"
                              >
                                <div class="model-option-item">
                                  <span>{{ model.name }}</span>
                                  <i 
                                    class="fa-solid fa-trash-can"
                                    style="color: #ff0000"
                                    @click.stop="deleteModelOption(model.id)"
                                  ></i>
                                </div>
                              </el-option>
                            </el-select>
                            
                            <!-- 模型上传按钮 -->
                            <el-button 
                              @click="showVrmModelDialog = true"
                              type="primary" 
                              plain 
                              class="add-server-btn">
                              <i class="fa-solid fa-plus"></i> {{ t('addVrmModel') }}
                            </el-button>
                            
                            <el-alert
                              type="info"
                              :closable="false"
                              class="mb-2"
                            >
                              <template #default>
                                <div class="alert-content">
                                  {{ t('vrmNotice1') }}<br>
                                  {{ t('vrmNotice2') }}<br>
                                  {{ t('vrmNotice3') }}
                                </div>
                              </template>
                            </el-alert>
                        </div>

                        <!-- VRM模型上传对话框 -->
                        <el-dialog
                          v-model="showVrmModelDialog"
                          :title="t('uploadVrmModel')"
                          width="600px"
                        >
                          <div class="upload-container">
                            <div
                              class="drop-zone"
                              @dragover.prevent
                              @drop.prevent="handleVrmModelDrop"
                              @click="browseVrmModelFile"
                            >
                              <el-icon :size="50"><i class="fa-solid fa-upload"></i></el-icon>
                              <p>{{ t('clickOrDropVrm') }}</p>
                            </div>
                            
                            <!-- 文件列表 -->
                            <div class="compact-file-list" v-if="newVrmModel.name">
                              <div class="compact-file-item">
                                <span class="file-name">{{ newVrmModel.name }}</span>
                                <el-button
                                  @click.stop="removeNewVrmModel"
                                  class="delete-icon"
                                  circle
                                >
                                  <i class="fa-solid fa-trash"></i>
                                </el-button>
                              </div>
                            </div>

                            <el-input
                              v-model="newVrmModel.displayName"
                              :label="t('modelDisplayName')"
                              :placeholder="t('modelDisplayNamePlaceholder')"
                              required
                            />
                          </div>
                          <template #footer>
                            <el-button @click="cancelVrmModelUpload">{{ t('cancel') }}</el-button>
                            <el-button type="primary" @click="uploadVrmModel" :disabled="!newVrmModel.name">
                              {{ t('createImmediately') }}
                            </el-button>
                          </template>
                        </el-dialog>
                      </div>
                    </el-form>
                  </div>

                  <!-- 直播页面 -->
                  <div v-show="subMenu === 'live_stream'">
                    <el-form class="settings-form" :model="liveConfig" label-position="top">
                      <div class="tool-item">
                        <!-- 直播配置头部 -->
                        <div class="tool-header" style="display: flex; justify-content: space-between; align-items: center;">
                          <span>
                            <el-icon><i class="fa-solid fa-video"></i></el-icon>
                            {{ t('live_stream') }}
                          </span>
                          <div>
                            <!-- 启动按钮 -->
                            <el-tooltip :content="t('start_live')" placement="top">
                              <el-button 
                                type="primary" 
                                @click="startLive" 
                                :disabled="!isLiveConfigValid || isLiveRunning || isLiveStarting"
                                circle
                              >
                                <template v-if="isLiveStarting">
                                  <i class="fa-solid fa-spinner fa-spin"></i>
                                </template>
                                <template v-else>
                                  <i class="fa-solid fa-play"></i>
                                </template>
                              </el-button>
                            </el-tooltip>
                            
                            <!-- 停止按钮 -->
                            <el-tooltip :content="t('stop_live')" placement="top">
                              <el-button 
                                type="danger" 
                                @click="stopLive" 
                                :disabled="!isLiveRunning || isLiveStopping"
                                circle
                              >
                                <template v-if="isLiveStopping">
                                  <i class="fa-solid fa-spinner fa-spin"></i>
                                </template>
                                <template v-else>
                                  <i class="fa-solid fa-stop"></i>
                                </template>
                              </el-button>
                            </el-tooltip>
                            
                            <!-- 重载按钮 -->
                            <el-tooltip :content="t('reload_live')" placement="top">
                              <el-button 
                                @click="reloadLiveConfig" 
                                :disabled="!isLiveRunning || isLiveReloading"
                                circle
                              >
                                <template v-if="isLiveReloading">
                                  <i class="fa-solid fa-rotate fa-spin"></i>
                                </template>
                                <template v-else>
                                  <i class="fa-solid fa-rotate"></i>
                                </template>
                              </el-button>
                            </el-tooltip>
                          </div>
                        </div>

                        <div class="tool-item">
                          <div class="tool-header">
                            <div class="header-left">
                              <span>
                                {{t('liveSetting')}}
                              </span>
                            </div>
                          </div>
                          <div class="tool-content">
                            <el-form-item :label="t('onlyDanmaku')" class="form-item-align" label-position="left">
                              <el-switch 
                                v-model="liveConfig.onlyDanmaku" 
                                @change="autoSaveSettings"
                              ></el-switch>
                            </el-form-item>   
                            <el-form-item :label="t('danmakuQueueLimit')" class="form-item-align" label-position="left">
                              <el-slider
                                v-model="liveConfig.danmakuQueueLimit"
                                :min="1"
                                :max="30"
                                :step="1"
                                @change="autoSaveSettings"
                              />
                            </el-form-item> 
                          </div>
                        </div>

                        <div class="tool-item">
                          <div class="tool-header">
                            <div class="header-left">
                              <span>
                                {{t('bilibili')}}
                                <el-link
                                  type="primary"
                                  :underline="false"
                                  href="https://open-live.bilibili.com/" 
                                  target="_blank"
                                >
                                  <el-icon class="mr-1">
                                    <i class="fa-solid fa-key"></i>
                                  </el-icon>{{ t('gotoBilibiliOpenLive') }}
                                </el-link>
                              </span>
                            </div>
                            <el-switch v-model="liveConfig.bilibili_enabled" @click.stop @change="autoSaveSettings"/>
                          </div>
                          <div class="tool-content">
                            <el-form-item :label="t('liveType')">
                              <el-select
                                v-model="liveConfig.bilibili_type"
                                :placeholder="t('liveTypePlaceholder')"
                                class="full-width-input"
                                @change="autoSaveSettings"
                              >
                                <el-option :label="t('web')" value="web"></el-option>
                                <el-option :label="t('bilibili_open_live')" value="open_live"></el-option>
                              </el-select>
                            </el-form-item>      
                            <el-form-item :label="t('roomID')" v-if="liveConfig.bilibili_type === 'web'">
                              <el-input
                                v-model="liveConfig.bilibili_room_id"
                                :placeholder="t('roomIDPlaceholder')"
                                class="full-width-input"
                                @change="autoSaveSettings"
                              />
                            </el-form-item>
                            <el-form-item :label="t('sessdata')" v-if="liveConfig.bilibili_type === 'web'">
                              <el-input
                                v-model="liveConfig.bilibili_sessdata"
                                :placeholder="t('sessdataPlaceholder')"
                                class="full-width-input"
                                show-password
                                @change="autoSaveSettings"
                              />
                            </el-form-item>
                            <el-form-item label="ACCESS KEY ID" v-if="liveConfig.bilibili_type === 'open_live'">
                              <el-input
                                v-model="liveConfig.bilibili_ACCESS_KEY_ID"
                                :placeholder="t('ACCESS_KEY_ID_Placeholder')"
                                class="full-width-input"
                                show-password
                                @change="autoSaveSettings"
                              />
                            </el-form-item>
                            <el-form-item label="ACCESS KEY SECRET" v-if="liveConfig.bilibili_type === 'open_live'">
                              <el-input
                                v-model="liveConfig.bilibili_ACCESS_KEY_SECRET"
                                :placeholder="t('ACCESS_KEY_SECRET_Placeholder')"
                                class="full-width-input"
                                show-password
                                @change="autoSaveSettings"
                              />
                            </el-form-item>
                            <el-form-item label="APP ID" v-if="liveConfig.bilibili_type === 'open_live'">
                              <el-input
                                v-model="liveConfig.bilibili_APP_ID"
                                :placeholder="t('APP_ID_Placeholder')"
                                class="full-width-input"
                                @change="autoSaveSettings"
                              />
                            </el-form-item>
                            <el-form-item label="ROOM OWNER AUTH CODE" v-if="liveConfig.bilibili_type === 'open_live'">
                              <el-input
                                v-model="liveConfig.bilibili_ROOM_OWNER_AUTH_CODE"
                                :placeholder="t('ROOM_OWNER_AUTH_CODE_Placeholder')"
                                class="full-width-input"
                                show-password
                                @change="autoSaveSettings"
                              />
                            </el-form-item>
                          </div>
                        </div>
                      </div>
                    </el-form>
                  </div>
                </div>
            </div>
        </div>
        <div v-show="activeMenu === 'api-group'" class="page agent-suite-container">
          <div class="suite-layout">
            <!-- 左侧导航 -->
            <div class="suite-sidebar">
              <div class="tile-nav">
                <div 
                  v-for="tile in apiTiles" 
                  :key="tile.id"
                  class="nav-item"
                  :class="{ active: subMenu === tile.id }"
                  @click="subMenu = tile.id">
                  <el-icon class="nav-icon"><i :class="tile.icon"></i></el-icon>
                  <span class="nav-text">{{ t(tile.title) }}</span>
                </div>
              </div>
            </div>
            <!-- 右侧内容 -->
            <div class="suite-content">
              <!-- OpenAI风格API -->
              <div v-show="subMenu === 'openai'" class="page">
                <el-form class="settings-form">
                  <div class="tool-item">
                    <!-- 原有SuperAPI内容 -->
                    <div class="tool-header">
                      <span>
                        <el-icon><i class="fa-solid fa-link"></i></el-icon>
                        {{ t('openaiStyleAPI') }}
                      </span>
                    </div>
                    <div class="tool-content">
                      <el-alert
                        type="info"
                        :closable="false"
                        class="mb-2"
                      >
                        {{ t('superAPIInstructions') }}
                      </el-alert>
                      <!-- 模型名称 -->
                      <el-form-item :label="t('modelName')" class="form-item-align">
                        <el-input
                          :value="'super-model'"
                          readonly
                          class="full-width-input"
                        >
                          <template #append>
                            <el-button
                              @click="copyModel"
                              class="copy-btn"
                            >
                            <i class="fa-solid fa-copy"></i>
                            </el-button>
                          </template>
                        </el-input>
                      </el-form-item>

                      <!-- API端点 -->
                      <el-form-item :label="t('apiEndpoint')" class="form-item-align">
                        <el-input
                          :value="partyURL+'/v1'"
                          readonly
                          class="full-width-input"
                        >
                          <template #append>
                            <el-button
                              @click="copyEndpoint"
                              class="copy-btn"
                            >
                            <i class="fa-solid fa-copy"></i>
                            </el-button>
                          </template>
                        </el-input>
                      </el-form-item>
                      <!-- 在index.html的API配置区块内添加 -->
                      <el-form-item :label="t('exampleLanguage')" class="form-item-align">
                        <el-select
                          v-model="selectedCodeLang"
                          @change="autoSaveSettings"
                          class="full-width-input"
                        >
                          <el-option label="Python" value="python"></el-option>
                          <el-option label="JavaScript" value="javascript"></el-option>
                          <el-option label="cURL" value="curl"></el-option>
                        </el-select>
                      </el-form-item>

                      <!-- 修改index.html中的代码块结构 -->
                      <div class="code-block">
                        <div class="code-header">
                          <span class="code-lang">{{ selectedCodeLang }}</span>
                          <button class="copy-button" @click.prevent="handleCopy"><i class="fa-solid fa-copy"></i></button>
                        </div>
                        <pre><code class="hljs" :class="'language-' + selectedCodeLang">{{ codeExamples[selectedCodeLang] }}</code></pre>
                      </div>
                    </div>
                  </div>
                </el-form>
              </div>
              <!-- FastAPI文档 -->
              <div v-show="subMenu === 'fastapi'" class="page">
                <iframe 
                  :src="partyURL + '/docs'" 
                  frameborder="0" 
                  width="100%" 
                  allow="fullscreen"
                  class="fastapi-iframe"
                ></iframe>
              </div>
              <!-- MCP风格API -->
              <div v-show="subMenu === 'mcp'" class="page">
                <el-form class="settings-form">
                  <div class="tool-item">
                    <!-- 原有SuperAPI内容 -->
                    <div class="tool-header">
                      <span>
                        <el-icon><i class='fa-solid fa-server'></i></el-icon>
                        {{ t('MCPStyleAPI') }}
                      </span>
                    </div>
                    <div class="tool-content">
                      <el-alert
                        type="info"
                        :closable="false"
                        class="mb-2"
                      >
                        {{ t('MCPAPIInstructions') }}
                      </el-alert>
                      <!-- API端点 -->
                      <el-form-item :label="t('apiEndpoint')" class="form-item-align">
                        <el-input
                          :value="partyURL+'/mcp'"
                          readonly
                          class="full-width-input"
                        >
                          <template #append>
                            <el-button
                              @click="copyMCPEndpoint"
                              class="copy-btn"
                            >
                            <i class="fa-solid fa-copy"></i>
                            </el-button>
                          </template>
                        </el-input>
                      </el-form-item>
                    </div>
                  </div>
                </el-form>
              </div>
              <!-- docker -->
              <div v-show="subMenu === 'docker'" class="page">
                <el-form class="settings-form">
                  <div class="tool-item">
                    <div class="tool-header">
                      <span>
                        <el-icon><i class='fa-brands fa-docker'></i></el-icon>
                        {{ t('docker') }}
                      </span>
                    </div>
                    <div class="tool-content">
                      <el-alert
                        type="info"
                        :closable="false"
                        class="mb-2"
                      >
                        {{ t('dockerInstructions') }}
                      </el-alert>
                      <!-- 修改index.html中的代码块结构 -->
                      <div class="code-block">
                        <div class="code-header">
                          <span class="code-lang">shell</span>
                          <button class="copy-button" @click.prevent="handleCopy"><i class="fa-solid fa-copy"></i></button>
                        </div>
                        <pre><code class="hljs language-shell">{{ dockerExamples }}</code></pre>
                      </div>
                    </div>
                  </div>
                </el-form>
              </div>
              <!-- 浏览器模式 -->
              <div v-show="subMenu === 'browser'" class="page">
                <el-form class="settings-form">
                  <div class="tool-item">
                    <span>
                      <el-icon>
                        <i class="fa-solid fa-globe"></i>
                      </el-icon>
                      {{ t('useWebmode') }}
                    </span>
                    <div class="browser-mode-btn-container">
                      <el-button
                        class="browser-mode-btn"
                        type="primary"
                        @click="launchBrowserMode"
                        round
                        size="large">
                        <i class="fa-solid fa-globe" v-if="!isBrowserOpening"></i>
                        <transition name="bounce">
                          <span v-if="isBrowserOpening" class="ml-2">
                            <el-icon class="is-loading"><loading /></el-icon>
                            {{ t('launching') }}
                          </span>
                          <span v-else class="ml-2">
                            {{ t('launchBrowserMode') }}
                          </span>
                        </transition>
                      </el-button>
                    </div>
                  </div>
                </el-form>
              </div>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
  <!-- 引入Vue和Element Plus -->
  <script src="node_modules/vue/dist/vue.global.js"></script>
  <script src="node_modules/element-plus/dist/index.full.js"></script>
  <script src="node_modules/@element-plus/icons-vue/dist/index.iife.min.js"></script>
  <script src="js/vue_data.js"></script>
  <script src="js/vue_methods.js"></script>
  <script src="js/renderer.js"></script>
</body>
</html>
